MessageHub: Website Chat Inbox Configuration

Adding website chat to your website makes it easy to connect with visitors in real-time. It’s a great way to answer questions, provide support, and guide customers, all while improving their experience on your site. In this article, you’ll learn how to set up live chat in MessageHub and make it ready for your website visitors.

Requirements

• An active ClickFunnels account

• The MessageHub App

Understanding Website Chat

Website Chat allows you to communicate with visitors in real time directly through your website. It’s a convenient way for businesses to engage customers, offer instant support, and provide personalized assistance, all while improving the user experience.

How Businesses Can Use Website Chat

• Customer Support: Resolve customer questions or issues instantly.

• Sales Inquiries: Assist potential buyers by providing real-time recommendations and answers.

• Lead Generation: Capture customer details during chat interactions for future follow-ups.

Supported Browsers and Platforms

The Website Chat widget is compatible with most modern browsers and platforms. Ensure your customers are using the following browser versions or higher for the best experience:

• Mozilla Firefox: v52+

• Google Chrome: v57+

• Chromium: v57+

• Apple Safari: v14.1+

• Microsoft Edge: v16+

Additionally, the chat widget works on mobile platforms with:

• Android: v5.0+

• iOS: v11.0+

Adding the Website Chat Inbox

To create a Website Chat inbox in MessageHub, follow these steps:

1. Open the MessageHub app from the left-side menu in your ClickFunnels Workspace.

2. Navigate to Settings ⚙ > Chat Inboxes and click the Add Inbox button in the top-right corner.

3. From the list of available inbox types, select Website.
   

4. Fill in the required fields:

   • Website Name: Enter a name for your website.

   • Website Domain: Provide the URL of your website.

   • Widget Color: Choose a color that matches your branding for the chat widget.

   • Welcome Heading: This will be the title shown in the chat widget (e.g., “Hi there!”).

   • Welcome Tagline: Add a short message that greets visitors (e.g., “We’re here to help! Ask us anything.”).

   • Enable Channel Greeting: Set whether to auto-send a greeting message when visitors start a conversation. Choose “Enabled” to activate this feature or “Disabled” to leave it off.

5. Once the inbox details are configured, click Create Inbox to proceed.

6. Next, assign agents to the inbox:

   • Select agents from the dropdown list who will be responsible for handling chats on this inbox.

   • Click Add Agents to save the changes.

At this point, your Website Chat inbox is successfully created in MessageHub. The next step involves configuring your ClickFunnels Site settings to connect the chat widget to your website, which will be covered in the next section.

Configuring the Chat Widget

After creating the Website Chat inbox in MessageHub, enable the chat widget in your ClickFunnels Workspace to make it visible on your site.

1. Open the Site app from the left-side menu in your ClickFunnels Workspace.

2. Go to the Overview tab and click the three-dot menu at the top-right corner. Then, select Site Settings from the dropdown.

3. Scroll to the MessageHub Chat Widget section and toggle on the Display MessageHub Chat Widget on Site option.

4. Click Update Site to save your changes. The widget may take a few minutes to appear on your site after enabling it.

Customizing the Website Inbox

The website inbox can be customized to align with your website’s branding and user experience preferences. To access customization options, follow these steps:

1. In MessageHub, Navigate to Settings ⚙ > Chat Inboxes

2. Click the Settings ⚙ icon next to your Website Inbox.

3. In the inbox settings, use the tabs at the top of the page to configure different aspects of the widget.

Settings

Here, you can configure the basic information and functionality of your chat widget:

• Channel Avatar: Upload an image (such as your logo) to represent your chat widget. This avatar is displayed on the chat interface to visitors.

• Website Name and Domain: Define the inbox name and enter your website's domain URL.

• Welcome Heading and Tagline: Craft a personalized greeting message and tagline displayed on the widget.

• Widget Color: Pick a color for the widget to match your brand.

• Enable Channel Greeting: Turn on automatic greeting messages when customers start a conversation.

• Set Reply Time: Choose how soon customers can expect a reply. This appears as a status message in the chat widget.

• Enable Email Collect Box: Adds a field to collect the customer’s email when a conversation begins.

• Enable CSAT: Enable or disable post-conversation Customer Satisfaction (CSAT) surveys.

• Allow Messages After Resolution: Decide if customers can send follow-up messages after a conversation is marked as resolved.

• Enable Conversation Continuity via Email: Allow chat conversations to continue over email if a customer leaves the site.

• Attach a Help Center: Select a Help Center to link to the widget if available.

• Features

  • Display File Picker on the Widget: Let users attach files during conversations.

  • Display Emoji Picker on the Widget: Allow visitors to use emojis in their chat messages.

  • Allow Users to End Conversations from the Widget: Enable an option for visitors to close conversations on their own.

  • Use Inbox Name and Avatar for the Bot: Customize the bot's identity using the inbox name and avatar.

• Sender Name Style:

  • Friendly: Shows a personal sender format, such as "Jane from Your Business."

  • Professional: Displays the sender's name as "Your Business."

  Click Update to save your changes after editing the settings.

Collaborators

The Collaborators tab allows you to manage agents and configure conversation assignment for this inbox.

• Use the dropdown menu to add agents who will have access to the inbox. Once an agent is added, their name will appear in the list.

• To remove an agent, click the "x" icon next to their name and select Update to save your changes.

• Toggle Enable Auto Assignment to allow conversations to be automatically assigned to the added agents.

• Set an Auto Assignment Limit to define the maximum number of conversations that can be assigned to an agent at one time.

Click Update after making any changes to apply the settings.

Business Hours

The Business Hours tab allows you to set the availability of your live chat widget.

• Enable or disable business availability for the inbox by checking the Enable business availability for this inbox box.

• Add an Unavailable Message for Visitors to display outside of business hours. Use the text editor to customize the message as needed.

• Select the appropriate Timezone for your business from the dropdown menu.

• Configure Weekly Hours by checking the days you are available and setting the specific hours. For all-day availability, check the All-Day box next to the relevant day.

• Leave any unavailable days unchecked to mark them as Unavailable.

Click Update business hours settings after making any changes.

Pre Chat Form

The Pre Chat Form tab allows you to collect user information before they start a conversation with your team. Here's how you can customize it:

• Enable or disable the Pre Chat Form by selecting "Yes" or "No" from the dropdown menu.

• Add a Pre Chat Message to guide users. Use the text editor to format the message as needed.

Pre Chat Form Fields

You can manage the fields users must fill out before starting a chat:

• Toggle Fields: Enable or disable specific fields using the switch next to each option.

• Field Types: Supported types include text, email, and checkboxes.

• Required Fields: Check the box in the Required column to make any field mandatory.

• Customize Labels and Placeholders: Adjust the Label (field name displayed to users) and Placeholder (default text shown inside the field).

Click Update Pre Chat Form Settings to save your changes.

Widget Builder

The Widget Builder tab allows you to customize the appearance and behavior of your chat widget. Below are the options you can configure:

• Website Avatar: Upload an image to display as the avatar in your chat widget.

• Website Name: Set the name of your website to appear in the widget.

• Welcome Heading: Customize the greeting text displayed at the top of the widget.

• Welcome Tagline: Add a short message to guide users as they start a chat.

• Reply Time: Set an estimated reply time to display on the widget.

• Widget Color: Choose a color to match your branding and enhance the widget's appearance.

• Widget Bubble Position: Select the position of the chat bubble: left or right.

• Widget Bubble Type: Choose between a Standard or Expanded Bubble for the launcher style.

• Widget Bubble Launcher Title: Add a title to the widget bubble, such as "Chat with us."

The live preview updates instantly as you adjust these settings, allowing you to ensure your widget looks and functions as desired. Once all customizations are complete, click Update Widget Settings to apply the changes.

Configuration

The Configuration tab provides access to the JavaScript code snippet for embedding the live chat widget on websites. However, this step is already handled within the Site Settings.

To ensure everything works correctly:

• Verify Website Token: Check that the website token displayed in this tab matches the one automatically added in the Site Settings of your ClickFunnels Workspace. If the tokens don’t match, the chat widget may not function properly.
  

Although you don’t need to manually copy and paste the script, this tab can be useful for troubleshooting or advanced customizations.

Adding the Chat Widget to Individual Pages

If you need to display the chat widget on an individual page, follow the steps below:

1. Go to your desired page in your ClickFunnels Workspace and open the Page Editor.

2. Click on the Settings (gear icon) at the top-right corner of the page editor.

3. From the dropdown menu, select Show Code to reveal the code editor.
   

4. In the Code Section, choose either the Header Code or Footer Code area to paste the Messenger Script. To find the script:

   • In MessageHub, navigate to Settings ⚙ > Chat Inboxes.

   • Click the Settings ⚙ icon next to your Website Inbox.

   • In the inbox settings, navigate to the Configuration tab.

5. Click Save to apply the changes.

Continuing Conversations Through Email

MessageHub allows your customers to continue their chat conversations via email in specific scenarios:

• When no agents are available, and the customer leaves a message in the chat.

• When the customer leaves the chat before an agent responds.

To enable this feature, ensure that the customer's email address is captured through one of the following methods:

• Pre-Chat Form: If enabled, the customer provides their email address before starting a conversation.

• Email Collect Prompt: When the pre-chat form is disabled, the system prompts the customer to provide an email address during the conversation.
  

Once an email address is captured, the conversation can transition seamlessly between chat and email. Customers receive an email thread summarizing the chat, which they can reply to. Agents can continue the conversation via email directly from the MessageHub dashboard.