Installing the Live Chat Widget
Getting Live Chat on your website takes just a few minutes. All you need to do is copy a small JavaScript snippet and paste it into your website's HTML. This guide walks through the process for any website platform.
Step 1: Go to Live Chat Dashboard and Widget
Log in to StackBloom and open Live Chat from the navigation. If this is your first time, the setup wizard will guide you to the widget installation step automatically.
- Navigate to Settings > Installation to access the embed script at any time
- Your unique widget ID is embedded in the script — it's tied to your StackBloom account
- Each connected website gets its own widget configuration, even sharing the same embed script
Step 2: Copy the Embed Script
On the Installation page, click Copy Script to copy your unique embed code to your clipboard. The script looks similar to this:
- The script is lightweight (under 5KB gzipped) and loads asynchronously — it won't slow down your page
- The script is the same regardless of which platform you're using
Step 3: Paste Before the </body> Tag
Add the script to every page where you want the chat widget to appear. The recommended placement is just before the closing </body> tag in your HTML template.
- WordPress: Go to Appearance > Theme Editor > footer.php, paste before
</body> - Shopify: Go to Online Store > Themes > Edit Code > theme.liquid, paste before
</body> - Squarespace: Go to Settings > Advanced > Code Injection > Footer section
- Webflow: Go to Project Settings > Custom Code > Footer Code section
- React/Next.js: Add to your root layout component or
_document.js
Step 4: Verify the Widget Appears
After saving the script to your website, open your website in a browser. You should see the chat bubble appear in the bottom-right corner (or wherever you configured it).
- It may take a few seconds for the widget to load on the first visit
- Open your browser's developer console — there should be no JavaScript errors related to the chat script
- In your Live Chat dashboard, the installation status on the Setup page should turn green
- Click the chat widget and send a test message to confirm conversations appear in your dashboard
Step 5: Configure Initial Settings
With the widget live on your site, do a quick initial configuration to make sure visitors have the best experience from day one.
- Color: Update the widget color to match your brand in Settings > Widget > Appearance
- Greeting: Set a welcoming message for new visitors
- Business Hours: Configure when agents are available so offline visitors see the right message
- Email capture: Enable offline email collection so you never miss a message when your team isn't available
💡 Tip: If you use a tag manager like Google Tag Manager, you can add the Live Chat embed script as a custom HTML tag with an "All Pages" trigger — no need to edit your website's code directly, and you can pause or update the script without a deployment.