> ## Documentation Index > Fetch the complete documentation index at: https://docs.poly.ai/llms.txt > Use this file to discover all available pages before exploring further. ## Submitting Feedback If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback: POST https://docs.poly.ai/feedback ```json { "path": "/webchat/widget-installation", "feedback": "Description of the issue" } ``` Only submit feedback when you have something specific and actionable to report. # Widget installation > Embed the chat widget on your website using direct HTML or Tag Manager. After [creating and configuring your widget](/webchat/widget), deploy it to your website using one of the methods below. ## Installation methods Choose **one** installation method: * **Option A: Direct HTML embed** – recommended for most sites * **Option B: Tag Manager** – if your organization manages scripts through Google Tag Manager or similar If you're unsure which route to use, start with **Option A**. ## Step 1: Generate a widget tag 1. Navigate to **Channels > Chat** in Agent Studio 2. Enable Chat as a channel 3. Enter the domain name you wish to publish the widget on 4. Configure [styling](/webchat/widget#styling-tab) and [content](/webchat/widget#content-tab) settings 5. Click **Save and publish** 6. Navigate to the **Embed** tab 7. Copy the unique script tag – it will look like: ```html theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ## Option A: Direct HTML embed 1. Open the HTML template that loads on **every page** (often called your global layout, base template, or `index.html`) 2. Paste the script tag **just before the closing `` tag** 3. Publish your website changes ```html theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ## Option B: Tag Manager (GTM) Use this if your organization deploys scripts using Google Tag Manager or a similar tool. Always retrieve your actual script tag from **Agent Studio** (**Channels > Chat > Embed** tab). The tag below is an example only. 1. In your Tag Manager, create a new **Custom HTML** tag 2. Paste your script tag 3. Set the trigger to **All Pages** 4. Publish the container ## Widget positioning After installing the widget, you can control its position with CSS. The widget renders inside a `#poly-ai-chat` element. Add a ` ``` Adjust `bottom` and `right` to avoid overlap with cookie banners, navigation bars, or other fixed UI. ### Widget icon sizes | Device | Icon size | | ------- | ----------- | | Desktop | 60px × 60px | | Mobile | 44px × 44px | Account for these dimensions when positioning the widget. ## Verification checklist After publishing, verify the following: The widget icon appears on the page (usually bottom-right corner). Clicking the widget opens the chat interface successfully. The agent can send and receive messages. If configured: * A **Call** button appears and tapping it starts a call * A **QR code** appears and scanning it works ### Quick verification steps 1. Open your website in a **private/incognito window** 2. Hard refresh (`Ctrl+Shift+R` or `Cmd+Shift+R`) to bypass cached scripts 3. Test on: * A desktop browser (Chrome or Edge) * A mobile device (iOS Safari or Android Chrome) ## Next steps If the widget isn't loading or behaving unexpectedly, see [Widget troubleshooting](/webchat/widget-troubleshooting).