Installing the chat widget on your website
How to drop the Lettr chat-widget script tag onto Shopify, WordPress, Webflow, and custom HTML sites — including testing on staging first.
The Lettr widget is a single <script> tag. Wherever you can edit your site's HTML or theme, you can install it.
The snippet
From your Lettr dashboard, open Chat Widget and copy the embed code. It looks like this — your data-widget-id will be filled in:
<script src="https://aurora.4os.ai/widget.js" data-widget-id="YOUR_WIDGET_ID" ></script>
Shopify
- In your Shopify admin, go to Online Store → Themes.
- On your active theme, click Actions → Edit code.
- Open theme.liquid in the Layout section.
- Paste the snippet just before the closing
</body>tag. - Save. The widget is live on every storefront page.
Tip: duplicate your live theme first and install on the duplicate. Preview to verify, then publish.
WordPress
If your theme supports a custom HTML block in the footer, paste the snippet there. Otherwise, install a header-and-footer-script plugin (WPCode, Insert Headers and Footers, or similar) and paste the snippet into the footer slot. Save.
Webflow
In your Webflow project, open Project Settings → Custom Code. Paste the snippet into the Footer Code field. Save and republish your site.
Custom HTML / static site / framework
Paste the snippet into your site's base template, just before </body>. For Next.js, it goes in app/layout.tsx. For Hugo, in layouts/_default/baseof.html.
Testing before going live
Whenever possible, install on a staging environment first. Open the staged URL, click the bubble, send a test message, and confirm it lands in your Lettr dashboard. Once that round-trip works, push to production.
Troubleshooting
If the bubble does not appear, see Troubleshooting common issues — the most frequent cause is content-security-policy blocking the script source.