> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weeziq.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding and Sharing

Once your chatbot is trained and customized, you need to deploy it where your visitors can actually use it. WeezIQ offers three deployment methods.

## Deployment Methods

<Tabs>
  <Tab title="JavaScript Widget">
    The most popular method. A small chat bubble appears in the corner of your website. Clicking it opens the full chat interface.

    ### How to Add It

    <Steps>
      <Step title="Get the Snippet">
        In your WeezIQ dashboard, navigate to the settings of your domain.
      </Step>

      <Step title="Copy the Code">
        Copy the provided JavaScript snippet.
      </Step>

      <Step title="Paste into Your Site">
        Paste it into your website's HTML, either in the `<head>` tag or just before the closing `</body>` tag.
      </Step>
    </Steps>

    ### How It Works

    The widget loads in an iframe and communicates with your website using the browser's `postMessage` API.  When the iframe is ready, it sends a "ready" message to the parent page. The parent page responds with the domain ID and host info for security validation.

    <Info>
      The widget is fully isolated from your website's code, ensuring it cannot interfere with your existing functionality.
    </Info>

    ### Compatibility

    The JavaScript embed works on virtually any platform that supports custom HTML:

    <CardGroup cols={3}>
      <Card icon="wordpress" title="WordPress" />

      <Card icon="shopify" title="Shopify" />

      <Card icon="globe" title="Wix" />

      <Card icon="globe" title="Webflow" />

      <Card icon="globe" title="Squarespace" />

      <Card icon="code" title="Custom Sites" />
    </CardGroup>
  </Tab>

  <Tab title="Standalone Page">
    If you do not want to embed the widget on your website, you can share a direct link to the chatbot's full-page interface.

    The URL follows the format:

    ```text theme={null}
    https://your-weeziq-url/chatbot?domain=YOUR_DOMAIN_ID
    ```

    **Use Cases:**

    * Add it to your email signature: *"Need quick help? Chat with our AI assistant."*
    * Include it in your social media bios for instant customer engagement.
    * Share it internally with your team as a private knowledge assistant.
  </Tab>

  <Tab title="iFrame Embed">
    Display the chat interface as a section embedded within a specific page (rather than a floating bubble).

    Copy the iframe embed code from your dashboard and paste it into your webpage's HTML where you want the chat to appear. You can adjust the `width` and `height` attributes.

    The chatbot automatically:

    * Removes all background colors for a transparent, seamless look
    * Removes margins and padding
    * Hides overflow scrollbars
    * Renders using an optimized inline layout
  </Tab>
</Tabs>

## Widget Features

Regardless of how you deploy the chatbot, your visitors get access to the full feature set:

<CardGroup cols={2}>
  <Card icon="bolt" title="Streaming AI Responses">
    Answers appear word-by-word in real time.
  </Card>

  <Card icon="bag-shopping" title="Product Cards">
    Interactive recommendations with images and prices (Shopify/WooCommerce).
  </Card>

  <Card icon="cart-shopping" title="Cart Overlay">
    A mini shopping cart experience directly inside the chat.
  </Card>

  <Card icon="rectangle-list" title="Lead Capture Forms">
    Dynamic forms that appear during conversation to collect visitor information.
  </Card>

  <Card icon="calendar-check" title="Calendar Booking">
    Built-in Cal.com widget for scheduling meetings.
  </Card>

  <Card icon="circle-question" title="Help Desk">
    Browsable Q\&A topics for common questions.
  </Card>

  <Card icon="thumbs-up" title="Satisfaction Ratings">
    Users can rate the chatbot's responses.
  </Card>

  <Card icon="location-dot" title="Page-Aware Chat">
    The chatbot knows which page the visitor is on and can tailor responses.
  </Card>
</CardGroup>
