Step 1: Create a widget in CRM Solid
Budget: 1 minute. In CRM Solid, go to Live Chat > Widgets > New. Give the widget a name (your website name is fine), set the primary domain (e.g., yourcompany.com), and pick a starting theme.
The panel generates an embed snippet that looks like this:
<script>
(function(w,d,s,o){
w._crmsolid = w._crmsolid || [];
var js = d.createElement(s);
js.src = "https://cdn.crmsolid.com/widget.js";
js.async = true;
js.setAttribute("data-widget-id", "wgt_abc123_yourwidget");
d.head.appendChild(js);
})(window, document, "script");
</script>Save the snippet somewhere; you will paste it once per site.
Step 2: Install the embed snippet
Pick your stack and follow the relevant sub-section.
WordPress
- Install the "Insert Headers and Footers" plugin (or equivalent) if you do not already have one.
- Go to Settings > Insert Headers and Footers.
- Paste the snippet into the Body Footer box.
- Save changes and load any page on the front-end. The chat bubble should appear in the bottom-right within 1-2 seconds of page load.
Shopify
- In your Shopify admin, go to Online Store > Themes > Actions > Edit code.
- Open
theme.liquidunder Layout. - Find the closing
</body>tag near the bottom. - Paste the snippet on the line immediately before
</body>. - Save. The widget loads on every page.
Webflow
- In Webflow, open Site Settings > Custom Code.
- Paste the snippet into the Footer Code box.
- Save changes and republish the site. The widget appears on every published page.
Next.js (App Router)
- Open
app/layout.tsxin your editor. - Import the
Scriptcomponent fromnext/script. - Add it just before the closing
</body>:
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
id="crmsolid-widget"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(function(w,d,s,o){
w._crmsolid = w._crmsolid || [];
var js = d.createElement(s);
js.src = "https://cdn.crmsolid.com/widget.js";
js.async = true;
js.setAttribute("data-widget-id", "wgt_abc123_yourwidget");
d.head.appendChild(js);
})(window, document, "script");
`,
}}
/>
</body>
</html>
);
}Plain HTML
- Open the HTML file(s) you want the widget on.
- Paste the snippet just before
</body>. - Save and reload. If the widget does not appear, check the browser console for a CORS or CSP error and add
cdn.crmsolid.comto your Content-Security-Policyscript-srcdirective.
Step 3: Theme the widget to match your brand
Budget: 3 minutes. In Widgets > (yours) > Theme, set:
- Primary color: your main brand color (used for the chat bubble and send button).
- Accent color: the second color (used for hovers and active states).
- Border radius: 4 for sharp corners, 16 for rounded, 999 for fully rounded.
- Font family: match your site if you have a custom font; otherwise system default works.
- Position: bottom-right (default), bottom-left, or custom offset.
- Welcome message: the first message visitors see when they open the chat (max 200 chars).
- Agent name display: show team name or real agent name.
For deeper customization, switch to Custom CSS mode and drop CSS that targets the CSS variables:
/* Custom CSS, auto-scoped to the widget shadow DOM */
.crm-solid-widget {
--crm-solid-bubble-bg: #5b21b6;
--crm-solid-bubble-shadow: 0 8px 24px rgba(91,33,182,0.4);
--crm-solid-header-bg: linear-gradient(135deg, #5b21b6, #06b6d4);
--crm-solid-font-family: "Inter", system-ui, sans-serif;
--crm-solid-radius-bubble: 24px;
--crm-solid-radius-window: 16px;
}Test on mobile, tablet, and desktop before going live. The widget's default responsive breakpoints handle most cases, but custom themes occasionally break on narrow phones.
Step 4: Configure proactive triggers
A widget that only opens when clicked has a 2-4% chat-open rate. A widget with smart proactive triggers gets 6-10%. Triggers are conditional pop-ups that nudge the visitor into starting a conversation.
In Widgets > (yours) > Triggers, add:
Trigger 1: Pricing page
Condition: URL contains "/pricing"
Wait: 10 seconds on page
Message: "Hi! Looking at pricing; anything I can clarify?"
Trigger 2: Exit intent
Condition: mouse leaves viewport toward top
Wait: none
Message: "Hang on, got a quick question before you go?"
Trigger 3: Deep-read on long-form
Condition: scroll position > 60% on /blog/* URLs
Wait: none
Message: "Enjoying this? Want to see how teams actually do it?"
Trigger 4: Demo page lingers
Condition: URL contains "/demo" AND time-on-page > 30s
Wait: none
Message: "Want me to walk you through a live demo?"
Trigger 5: Second visit
Condition: returning visitor on home page
Wait: none
Message: "Welcome back! Picking up where we left off?"Start with 2-3 triggers. More than 5 starts to feel intrusive. The exit-intent trigger has the highest engagement rate across customer types; keep it on.
Step 5: Set business hours and after-hours behavior
Budget: 1 minute. In Widgets > (yours) > Schedule:
- Timezone: your team's primary timezone.
- Business hours: e.g., Mon-Fri 9:00 AM - 6:00 PM. You can set different hours per day.
- Holiday calendar: upload your team holidays so the widget respects them.
- After-hours behavior: pick one:
- AI bot takeover: the trained AI bot handles the conversation until a human is available. Highest conversion if the bot is good.
- Email-capture form: shows a form asking for email and message, replies in the morning.
- Static message: "We are offline, back at 9 AM Eastern." Lowest engagement but simplest.
Step 6: Wire up AI fallback to your bot
If you have a trained AI bot from the AI sales bot guide, connect it as the after-hours fallback.
In Widgets > (yours) > AI fallback:
- Toggle "Enable AI fallback".
- Pick the bot persona from the dropdown.
- Set the trigger: always-on, after-hours-only, or fallback-when-no-agent-online.
- Set the handoff signal: when the AI hands off to a human, the agent picks up the existing thread with full context.
- Enable disclosure mode: the bot introduces itself as "automated assistant", recommended for trust and regulatory compliance.
Tip: always-on AI fallback works better than after-hours-only for B2B. Visitors expect instant response; having the AI take the first turn even during business hours (with quick handoff to a human) keeps engagement up.
Step 7: Test on a staging URL before production
Budget: 5 minutes. CRM Solid lets you create a staging variant of the widget that only loads on a staging domain.
- In Widgets > (yours) > Variants > Add staging, set the staging domain (e.g.,
staging.yourcompany.com). - Install the staging widget snippet on your staging site.
- Test:
- Widget loads within 2 seconds.
- Theme matches expectations on mobile + desktop.
- Proactive triggers fire on the right pages.
- Business-hours and after-hours behavior switches at the right time.
- AI fallback responds correctly.
- Agent receives the chat in the unified inbox.
- Conversation persists across page navigations.
Fix anything that fails on staging. Going to production with unresolved issues turns into a long Friday afternoon.
Step 8: Deploy to production and watch metrics
Deploy the embed snippet to production. Open Live Chat > Widgets > (yours) > Analytics and watch:
- Chat-open rate: target 5-10% of unique visitors. Below 3%, your triggers are not firing well or the bubble is too subtle.
- First-response time: target < 60 seconds during business hours, < 5 minutes with AI fallback.
- Conversation completion rate: target ≥ 70% of opened chats reach a clear outcome (qualified, booked, not-fit, opt-out).
- AI fallback handoff rate: 30-50% is healthy (see the AI bot guide).
- Conversion to demo / signup: the bottom-line metric; track which page hosted the conversation that converted.
Adjust theme, triggers, and AI fallback based on the data during week 1. Most teams iterate twice in the first month, then settle into a stable config.