Getting Started Guide ~15 min read

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 Only

Before you can customize or install the widget, an admin needs to enable the Converge integration and configure your website's domain.

  1. 1
    Go to Manage → Platforms

    Click your company name in the sidebar to access company settings, then select the "Platforms" tab.

  2. 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. 3
    Enter your domain

    Type your website's domain without https:// (e.g., mycompany.com). This restricts the widget to your site only.

  4. 4
    Click Enable

    The system generates a unique API key for your widget. Keep this safe—you'll need it for installation.

  5. 5
    Copy the embed code

    A script tag appears with your API key embedded. Copy this—you'll paste it into your website next.

Widget enable platform settings
Success Check: You see a green "Enabled" badge next to Converge, and the embed code is visible with your unique API key.

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. 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. 2
    Find the closing </body> tag

    Scroll to the bottom of your HTML. The widget script should go just before this closing tag.

  3. 3
    Paste the embed code

    Insert the script on its own line, just above </body>.

  4. 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".

Pro Tip: Test the widget on a staging site first if you have one. This lets you confirm everything works before going live.
Success Check: Visit your website and look for the chat button in the bottom-right corner. Click it to confirm the widget opens properly.

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. 1
    Click the Widget icon in the sidebar

    Look for the code/message icon (MessageSquareCode) in your company's sidebar.

  2. 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. 1
    Click the color picker

    A color palette opens. You can also type a hex code directly (e.g., #2c2ce5).

  2. 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
Widget appearance settings
Pro Tip: Use your website's primary button color as the widget brand color. This creates visual consistency across your site.
Success Check: Click Save, then refresh your website. The widget should display your new brand color.

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

Success Check: Open the widget on your website and verify your welcome message appears when the chat opens.

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
Email Disabled / Optional / Required Lead generation, follow-up campaigns
Phone Disabled / Optional / Required Sales calls, urgent support callbacks

Setting requirements

  1. 1
    Find the Contact Options section

    This is in Widget Settings, below the Messages section.

  2. 2
    Set your email preference

    Choose Disabled (never ask), Optional (can skip), or Required (must provide).

  3. 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.

Widget contact options
Pro Tip: Start with email as Required and phone as Optional. This gives you a reliable way to follow up while keeping friction low.
Success Check: Open a fresh incognito window, visit your site, and click the chat. You should see the name prompt, then email (if enabled), then phone (if enabled).

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. 1
    Scroll to Suggested Messages

    This section is at the bottom of Widget Settings.

  2. 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. 3
    Click the + button or press Enter

    Your suggestion is added to the list.

  4. 4
    Add 3-5 suggestions

    Cover your most common inquiry types. Too many can overwhelm; too few limits options.

Good suggestion examples

💰 "I'd like to know about pricing"
🛒 "I have a question about my order"
🔧 "I need technical support"
📦 "Where is my shipment?"
🤝 "I want to talk to sales"

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

Success Check: Open the widget on your site. Before typing anything, you should see your suggested messages as tappable buttons.

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.