- Guides
- Widget Guide
Add Live Chat to Your Website
Your website visitors have questions—and they don't want to hunt for a contact form. The Converge chat widget brings the conversation to them, appearing as a friendly chat button on every page. In this guide, you'll install it, make it match your brand, and start capturing leads automatically.
What You'll Need
Admin or Owner Access
Enabling the widget integration requires admin privileges. Regular team members can customize settings after it's enabled.
Access to Your Website's HTML
You'll need to add a script tag to your website. If you use a CMS like WordPress, Shopify, or Webflow, you can typically do this through their settings.
Your Website's Domain
You'll enter your domain (e.g., example.com) to configure the widget. This ensures it only works on your site.
Enabling the Widget Integration
Admin / Owner OnlyBefore you can customize or install the widget, an admin needs to enable the Converge integration and configure your website's domain.
-
1
Go to Manage → Platforms
Click your company name in the sidebar to access company settings, then select the "Platforms" tab.
-
2
Find "Converge" in the platform list
The Converge platform is your own branded chat widget—it's what powers the embeddable chat on your website.
-
3
Enter your domain
Type your website's domain without
https://(e.g.,mycompany.com). This restricts the widget to your site only. -
4
Click Enable
The system generates a unique API key for your widget. Keep this safe—you'll need it for installation.
-
5
Copy the embed code
A script tag appears with your API key embedded. Copy this—you'll paste it into your website next.
Installing on Your Website
Adding the widget is as simple as pasting one line of code. The script is tiny, loads asynchronously, and won't slow down your page.
The embed code
Your embed code looks like this:
<script async type="module" src="https://unpkg.com/@convergeapp/chat-widget/dist/widget.js" data-api-key="YOUR_API_KEY"></script>
Where to paste it
-
1
Open your website's HTML
Look for the main layout file or template that loads on every page. This is usually called
index.html,layout.html, or similar. -
2
Find the closing </body> tag
Scroll to the bottom of your HTML. The widget script should go just before this closing tag.
-
3
Paste the embed code
Insert the script on its own line, just above
</body>. -
4
Save and deploy
Publish your changes. The widget will appear immediately on your live site.
Platform-specific instructions
WordPress
Use a plugin like "Insert Headers and Footers" or add the code to your theme's footer.php file.
Shopify
Go to Online Store → Themes → Edit code → Find theme.liquid → Paste before </body>.
Webflow
Go to Project Settings → Custom Code → Paste in the "Footer Code" section.
Wix
Go to Settings → Custom Code → Add Code → Paste and set placement to "Body - end".
Customizing Appearance
Your widget should feel like a natural part of your website, not an afterthought. Converge lets you match your brand colors and control what visitors see.
Accessing widget settings
-
1
Click the Widget icon in the sidebar
Look for the code/message icon (MessageSquareCode) in your company's sidebar.
-
2
You'll see the Widget Settings page
All customization options are organized into clear sections: Appearance, Messages, Contact Options, and Suggested Messages.
Brand color
The brand color affects the widget header, chat button, and outgoing message bubbles. Pick a color that matches your website's primary accent.
-
1
Click the color picker
A color palette opens. You can also type a hex code directly (e.g.,
#2c2ce5). -
2
Select your brand color
Changes preview in real-time on your live widget.
Q&A page visibility
If you've created Q&A content (FAQ answers), visitors can browse them directly in the widget. Toggle this off if you haven't set up Q&A yet.
- Show Q&A page — Visitors see a "Help" or FAQ tab in the widget navigation
- Hide Q&A page — The widget shows only the chat interface
Setting Up Messages
First impressions matter. The right messages can turn a passive visitor into an active conversation.
Popup message
This small notification appears near the chat button a few seconds after someone lands on your page. It's a gentle nudge to start a conversation.
Example: "👋 Hey! Got questions? We're here to help."
- Keep it under 50 characters—short and friendly works best
- Leave empty to disable the popup entirely
Welcome message
When someone opens the chat, they see this message first. It sets the tone for the entire conversation and appears as a system message (not from any specific agent).
Example: "Hi there! 👋 How can we help you today? Our team typically responds within a few minutes."
Direct call phone
Add a phone number to give visitors a way to call you directly. This appears as a call option in the widget menu—perfect for urgent inquiries or customers who prefer voice.
Format: Use international format with country code (e.g., +1234567890)
The Messages section of Widget Settings showing the Popup Message input, Welcome Message input, and Direct Call Phone field
Configuring Lead Capture
Before visitors send their first message, you can collect their contact information. This turns anonymous website visitors into identifiable leads your team can follow up with.
What you can collect
| Field | Options | When to Use |
|---|---|---|
| Name | Always collected | Every visitor provides their name |
| Disabled / Optional / Required | Lead generation, follow-up campaigns | |
| Phone | Disabled / Optional / Required | Sales calls, urgent support callbacks |
Setting requirements
-
1
Find the Contact Options section
This is in Widget Settings, below the Messages section.
-
2
Set your email preference
Choose Disabled (never ask), Optional (can skip), or Required (must provide).
-
3
Set your phone preference
Same options as email. Consider your business needs—B2B might want phone, B2C might not.
How it works for visitors: The onboarding flow is conversational—visitors see one field at a time, making it feel natural rather than like filling out a form.
Adding Suggested Messages
Some visitors don't know what to say. Suggested messages give them pre-written conversation starters they can tap to begin chatting—no typing required.
Creating suggestions
-
1
Scroll to Suggested Messages
This section is at the bottom of Widget Settings.
-
2
Type your first suggestion
Think about what your visitors commonly ask. Examples: "I have a question about pricing" or "I need help with my order".
-
3
Click the + button or press Enter
Your suggestion is added to the list.
-
4
Add 3-5 suggestions
Cover your most common inquiry types. Too many can overwhelm; too few limits options.
Good suggestion examples
Managing suggestions
- Delete: Click the X button next to any suggestion to remove it
- Reorder: Suggestions appear in the order listed—put your most common inquiries first
The Suggested Messages section showing a list of 4 quick-tap suggestions with X buttons to delete, and the input field to add new ones
Best Practices & Tips
Match your brand colors
Use your website's primary accent color for the widget. Consistency builds trust and makes the chat feel native to your site.
Keep the popup message short
Under 50 characters is ideal. Something like "Need help? 👋" works better than a paragraph.
Only show Q&A if you have content
An empty FAQ section creates a poor impression. Toggle it off until you've added helpful Q&A content.
Require email for lead generation
Even if phone is optional, requiring email gives you a reliable follow-up channel for every conversation.
Write suggestions that match real questions
Look at your support inbox—what do customers actually ask? Mirror that language in your suggestions.
Set up Auto-Replies for the widget
Combine the widget with Auto-Replies to acknowledge messages instantly, even when your team is busy.
What's Next?
Your widget is installed and configured. Here are some related features to explore:
- Replies Guide — Set up quick replies and auto-replies for faster responses
- Q&A — Create FAQ content that appears in your widget
- Contact Analytics — Track visitor behavior and widget engagement
Need more help?
Our support team is here for you. Click the chat widget in the bottom right corner to start a conversation.
We typically respond within minutes during business hours.