[V0_FILE]typescriptreact:file="app/api/widget/route.ts" import { NextResponse } from "next/server" import { cors } from "@/lib/cors" export async function POST(request: Request) { // Apply CORS headers const response = NextResponse.json({ success: true }) return cors(request, response) } export async function OPTIONS(request: Request) { // Handle preflight requests const response = new NextResponse(null, { status: 204 }) return cors(request, response) } [V0_FILE]typescriptreact:file="lib/cors.ts" import type { NextResponse } from "next/server" export function cors(request: Request, response: NextResponse) { // Get the origin from the request const origin = request.headers.get("origin") || "*" // Set CORS headers response.headers.set("Access-Control-Allow-Origin", origin) response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS") response.headers.set("Access-Control-Allow-Headers", "Content-Type") return response } [V0_FILE]typescriptreact:file="app/widget/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" export default function WidgetPage() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const response = await fetch("/api/widget", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) if (response.ok) { setIsSubmitted(true) setFormData({ name: "", email: "", message: "" }) } } catch (error) { console.error("Error submitting form:", error) } finally { setIsSubmitting(false) } } return (

{isSubmitted ? (

Thank you!

Your submission has been received.

) : (

Name

Message

</div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
            {isSubmitting ? "Submitting..." : "Submit"}
          </Button>
        </form>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/widget/embed/page.tsx"
export default function EmbedPage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Widget Embed Code</h1>

<div className="bg-gray-100 p-4 rounded-md">
        <p className="mb-4">Copy and paste this code into any website where you want to embed your form:</p>
        <pre className="bg-gray-800 text-white p-4 rounded-md overflow-x-auto">
          {`<script src="${process.env.NEXT_PUBLIC_APP_URL || "https://your-nextjs-app.com"}/widget.js" id="my-widget" data-theme="light"></script>`}
        </pre>
      </div>

<div className="mt-8">
        <h2 className="text-xl font-bold mb-4">Configuration Options</h2>
        <ul className="list-disc pl-6 space-y-2">
          <li>
            <code className="bg-gray-100 px-2 py-1 rounded">data-theme</code>: Set to "light" or "dark" to match your
            website's theme
          </li>
          <li>
            <code className="bg-gray-100 px-2 py-1 rounded">data-position</code>: Set to "left" or "right" to position
            the widget button
          </li>
          <li>
            <code className="bg-gray-100 px-2 py-1 rounded">data-title</code>: Customize the form title
          </li>
        </ul>
      </div>

<div className="mt-8 p-6 border border-gray-200 rounded-md">
        <h2 className="text-xl font-bold mb-4">Preview</h2>
        <div id="widget-preview"></div>

// Get the current script attributes
  function getScriptAttributes() {
    const script = document.getElementById("my-widget") || document.querySelector('script[src*="widget.js"]')
    if (!script) return {}

const attributes = {}
    for (const attr of script.attributes) {
      if (attr.name.startsWith("data-")) {
        const key = attr.name.replace("data-", "")
        attributes[key] = attr.value
      }
    }
    return attributes
  }

// Create widget styles
  function createStyles() {
    const style = document.createElement("style")
    style.innerHTML = `
      .my-widget-button {
        position: fixed;
        ${config.position === "left" ? "left" : "right"}: 20px;
        bottom: 20px;
        background-color: #0070f3;
        color: white;
        border: none;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        z-index: 9999;
      }
      
      .my-widget-container {
        position: fixed;
        ${config.position === "left" ? "left" : "right"}: 20px;
        bottom: 90px;
        width: 350px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
        z-index: 10000;
        overflow: hidden;
        display: none;
        max-height: 80vh;
        transition: all 0.3s ease;
      }
      
      .my-widget-container.open {
        display: block;
      }
      
      .my-widget-header {
        padding: 16px;
        background-color: #0070f3;
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .my-widget-close {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 18px;
      }
      
      .my-widget-iframe {
        width: 100%;
        height: 450px;
        border: none;
      }
      
      .my-widget-button-icon {
        width: 24px;
        height: 24px;
      }
    `
    document.head.appendChild(style)
  }

// Create widget button
  function createWidgetButton() {
    const button = document.createElement("button")
    button.className = "my-widget-button"
    button.innerHTML = `
      <svg class="my-widget-button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z" fill="currentColor"/>
      </svg>
    `
    button.addEventListener("click", toggleWidget)
    document.body.appendChild(button)
    return button
  }

// Create widget container
  function createWidgetContainer() {
    const container = document.createElement("div")
    container.className = "my-widget-container"

const header = document.createElement("div")
    header.className = "my-widget-header"
    header.innerHTML = `
      <span>${config.title}</span>
      <button class="my-widget-close">×</button>
    `

const iframe = document.createElement("iframe")
    iframe.className = "my-widget-iframe"
    iframe.src = `${getBaseUrl()}/widget`

container.appendChild(header)
    container.appendChild(iframe)

header.querySelector(".my-widget-close").addEventListener("click", toggleWidget)

document.body.appendChild(container)
    return container
  }

// Toggle widget visibility
  function toggleWidget() {
    widgetContainer.classList.toggle("open")
  }

// Get base URL from script src
  function getBaseUrl() {
    const script = document.getElementById("my-widget") || document.querySelector('script[src*="widget.js"]')
    if (!script) return ""

const src = script.src
    return src.substring(0, src.lastIndexOf("/"))
  }

// Initialize widget
  function init() {
    createStyles()
    const button = createWidgetButton()
    const container = createWidgetContainer()

// Add message listener for iframe communication
    window.addEventListener("message", (event) => {
      // Handle messages from the iframe if needed
      if (event.data.type === "widget-submitted") {
        // Handle form submission
      }
    })

return {
      button,
      container,
      open: () => container.classList.add("open"),
      close: () => container.classList.remove("open"),
    }
  }

// Initialize the widget
  const widgetButton = createWidgetButton()
  const widgetContainer = createWidgetContainer()

// Expose widget API
  window.MyWidget = {
    open: () => widgetContainer.classList.add("open"),
    close: () => widgetContainer.classList.remove("open"),
    toggle: toggleWidget,
  }
})()
[V0_FILE]typescriptreact:file="app/page.tsx"
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-8">Embeddable Widget Demo</h1>

<div className="max-w-2xl w-full bg-white p-8 rounded-lg shadow-md">
        <h2 className="text-2xl font-semibold mb-4">How It Works</h2>
        <p className="mb-6">
          This demo shows how to create an embeddable widget that can be added to any website using a simple script tag.
        </p>

<div className="bg-gray-100 p-4 rounded-md mb-6">
          <p className="font-medium mb-2">Embed Code:</p>
          <pre className="bg-gray-800 text-white p-4 rounded-md overflow-x-auto">
            {`<script src="${process.env.NEXT_PUBLIC_APP_URL || "https://your-nextjs-app.com"}/widget.js" id="my-widget"></script>`}
          </pre>
        </div>

<p className="mb-4">
          The widget is already embedded on this page. Click the chat button in the bottom right corner to see it in
          action!
        </p>

<a href="/widget/embed" className="text-blue-600 hover:underline">
          View detailed embed instructions →
        </a>
      </div>
    </main>
  )
}</article></body></html>