This guide walks through installing the HoopAI chat widget on popular third-party website platforms. Before starting, copy your widget embed code from Sites > Chat Widget > Edit > Get Code.
Squarespace
Wix
Weebly
Shopify
WordPress
Open Code Injection
In your Squarespace dashboard, go to Settings > Advanced > Code Injection.
Paste in the Footer field
Paste the widget embed code into the Footer field.
Save and verify
Click Save. Open your live site in an incognito window and confirm the chat widget appears.
Code Injection is available on Squarespace Business and Commerce plans. If you are on a Personal plan, you will need to upgrade to add custom code.
Open Custom Code
In your Wix dashboard, go to Settings > Custom Code (under Advanced).
Add custom code
Click + Add Custom Code. Paste the widget embed code into the code field.
Configure placement
Set the placement to Body - End and apply to All pages.
Save and publish
Click Apply, then publish your site. Open the live site to verify the widget appears.
Custom Code requires a Wix Premium plan with a connected domain.
Open the HTML/CSS editor
In the Weebly editor, click Settings > SEO or go to Theme > Edit HTML/CSS.
Add the code before closing body tag
Locate the closing </body> tag in the footer template. Paste the widget embed code just above it.
Save and publish
Save the template changes and publish your site. Verify the widget appears on the live site.
Open your theme code
In Shopify admin, go to Online Store > Themes. Click Actions > Edit Code on your active theme.
Open the theme.liquid file
In the Layout folder, click theme.liquid.
Paste before the closing body tag
Scroll to the bottom of the file and paste the widget embed code just before </body>.
Save
Click Save. The widget appears on all pages of your Shopify store.
If you only want the widget on specific pages, use Shopify’s conditional Liquid tags to control where the code renders.
Option A: Use the LeadConnector plugin
Install the LeadConnector plugin from Plugins > Add New. Sign in with your HoopAI credentials and select your widget. No code required.
Option B: Manual code insertion
If you prefer manual installation, go to Appearance > Theme Editor (or use a plugin like “Insert Headers and Footers”). Paste the widget embed code into the footer section.
Save and verify
Save your changes and visit the live site to confirm the chat widget appears.
The LeadConnector plugin method is recommended as it does not require editing theme files and persists across theme changes.
Verifying the installation
After installing on any platform:
- Open the live site in a private/incognito browser window
- Confirm the chat bubble appears in the correct position
- Click the bubble to open the chat window
- Submit a test message and verify it appears in Conversations in your HoopAI account
If your site uses a cookie consent banner, the chat widget will not load until the visitor accepts cookies. Test with cookies accepted to confirm the widget works correctly.
