Installing the Chat Widget on Your Website
One snippet of code. That's all it takes.
Written by Outlearn Documentation
Updated at April 24th, 2026
Table of Contents
Everything is ready. The sources are connected, the instructions are written, the branding looks right. You have tested it in the preview panel and the answers are good. The only thing left is putting it on your website - and that is a single copy-paste away.
This article gets you through that last step. No developer required, no build process, no deployment pipeline. Copy the embed snippet, paste it before the closing body tag, and your agent is live. The conversations can start today.
In this article, you'll learn:
- How to get your embed code
- Where to paste it on your website
- How to turn the widget on or off without touching the code
Step 1: Get Your Embed Code
- Go to the Deploy tab.
- Click Customize Widget on the Chat Widget card.
- Click the Embed tab.
- Click Copy to copy the script snippet to your clipboard.
Step 2: Paste It Into Your Website
Paste the snippet just before the closing </body> tag on every page where you want the chat widget to appear.
If you want the widget on every page of your site, add it to your site's global layout or template - so it's included automatically on all pages.
Where to find </body> depends on your platform:
| Platform | Where to add the snippet |
|---|---|
| Custom HTML site | Directly before </body> in your HTML file |
| WordPress | Theme editor → footer.php, just before </body>
|
| Webflow | Project Settings → Custom Code → Footer Code |
| Squarespace | Website → Pages → Website Tools → Code Injection → Footer |
| Shopify | Online Store → Themes → Edit Code → theme.liquid, before </body>
|
| Wix | Settings → Custom Code → Add Code → Body - end |
Step 3: Confirm It's Working
After pasting the code and publishing your site, visit the page and look for the chat bubble in the corner of the screen. Click it to confirm the widget opens and your agent responds correctly.
If the widget doesn't appear, check that the snippet was pasted correctly and that the page was published after the change. Clear your browser cache if needed.
Turning the Widget On or Off
You can pause the widget at any time without removing the embed code from your site. This is useful during maintenance, content updates, or testing.
Best Practices
- Test on a staging or preview version of your site before publishing to production - confirm the widget loads and your agent responds correctly before real users see it.
- Add the snippet to your global site template so you only have to do this once, rather than page by page.
- Use the Active toggle to pause the widget during major site maintenance rather than removing the embed code - it's easier to turn back on.
- If you update your widget's branding or settings in Outlearn, the changes take effect automatically - you don't need to update the embed code.