CATEGORIES

website chat widget

Setting up Chat Widget for Website

March 25, 20253 min read

💬 Chat Widget Help Guide

Welcome to the Chat Widget section. This tool allows you to create and manage web chat experiences on your site—whether through SMS, email, live chat, or WhatsApp (depending on availability).


📍 Accessing the Chat Widget

To get started:

  1. Navigate to Sites from the left-hand navigation panel.

  2. Click on Chat Widget in the upper right-hand navigation.

Here you’ll see all previously created widgets or the option to create a new one.


🗂 Managing Existing Chat Widgets

For existing widgets, you’ll see:

  • Name

  • Last Updated Date

  • Chat Type

  • Options via the three-dot menu:

    • Edit

    • Clone

    • Delete

Your account supports unlimited chat widgets.


🆕 Creating a New Chat Widget

Click the blue “New” button in the upper right.

Choose Your Chat Type:

  • SMS & Email Chat – Ideal for teams not available 24/7

  • Live Chat – Best for 24/7 support teams

  • WhatsApp (if enabled in your account)

You can also activate Conversational AI to support your live chat.

Let’s begin with SMS & Email Chat. Click Select to open the widget editor.


🎨 Chat Widget Editor Overview

You’ll see a preview in the bottom right, and edit options on the left panel.

🖌 Styles Tab:

  • Enable/Disable Chat Prompt

  • Show or hide the chat icon image

  • Choose pre-built themes or use custom colors

  • Set your Welcome Message

  • Enable Return Visitor Greetings:

    • Example: “Welcome back, Lisa!” (if Lisa previously submitted her info)


🧰 Widget Customization

Under Widget Customization, you can:

  • Allow or replace the avatar image

  • Set alt text for the avatar

  • Adjust widget positioning (e.g., bottom right)

  • Choose auto or custom dimensions

  • Click Save in the top-right when finished


💬 Chat Window

This section appears when the chat widget is opened.

You can:

  • Edit the Title and Intro Message

  • Enable/disable Email Collection Field

  • Change the Call to Action (e.g., “Send” → “Submit”)


⚙️ Additional Options

  • Agency Branding: Add your agency’s logo/link

  • Enable HIPAA Consent Checkbox

  • Add Legal Message below the checkbox

Be sure to click Save after making changes.


✉️ Messaging Settings

This includes post-submission settings:

  • Acknowledgement Message

  • Customer Support Contact Info

  • Greeting and Icon

  • Placeholder color

All changes are reflected in the preview pane.


🌐 Language & Widget Name

  • Set the Widget Name at the top

  • Choose an Available Language for localization

  • Click Save when done


📎 Embed Options

After saving, you have two ways to use the widget:

1. Get for WordPress

Use this if integrating into a WordPress site.

2. Get Code

  • Click to generate HTML embed code

  • Copy and paste into your website’s custom code area

  • Alternatively, use with Google Tag Manager

If using inside Sites or Funnels built in your account, the chat widget can be automatically embedded—no need for external code.


🔁 Live Chat Setup

Let’s now create a Live Chat widget.

  • Click New → Select Live Chat

  • The setup process is similar to the SMS/Email chat

Additional Live Chat Settings:

👋 Welcome Message:

  • Customize your Live Chat Welcome Message

⏱ Fallback Settings:

  • Set a fallback sub-account user for inactivity

  • Customize the fallback message to appear to the user

🔒 Inactivity Closure:

  • Set time for chat auto-close due to inactivity

  • Add a chat closed message


🛠 Live Chat: Messaging Enhancements

This section includes:

  • Feedback Message

  • Feedback Submission Note

  • Chat Ended Message

  • Acknowledgement Icon

View all updates in real-time in the preview pane.

Click Save when satisfied.


🚀 Publishing Your Chat Widget

Once your widget is ready:

  • Click Get for WordPress or Get Code

  • Embed using HTML, Google Tag Manager, or directly in your account’s site builder

Founder of SheepFeast

Mark Rowan

Founder of SheepFeast

Back to Blog