Freshchat allows you to create and deploy multiple widgets. This enables you to offer personalized support to your customers with unique experiences across different pages.


For example, the support experience on your product listing page may need to be different from the one on your order tracking page. Similarly, if you operate multiple brands, the support experience for each of them may need to be unique.


This article contains:


Plan-wise availability

The following features are available on the Growth plan and above:

  • Multiple widgets
  • FAQs
  • Hide branding

All other conversations widget features are available on all plans.


Tip: 'Web widget' and 'conversations widget' refer to the same Freshchat widget and can be used interchangeably.


Create widgets

Navigate to Admin Settings > Channels > Web Chat to create and configure widgets. Your first widget is pre-configured for you. Click Start customizing to begin modifying this widget or click Go to live preview to test it.

The Web chat settings page when you haven't configured your first widget.


Once you initiate a conversation in your first widget, the Web Chat page will change and you will be able to create more widgets by clicking New widget. Click a widget's name to begin customizing it. You can edit metadata for a widget, clone it, or delete it from the hamburger menu.


You can create up to 30 widgets in your Freshchat account. To distinguish widgets, a unique WidgetUuid is added to each new widget except the default one.


The Web Chat settings page with multiple widgets configured.


Customize a widget

When you start customizing a widget, you'll see 4 menus:

  • Appearance: change a widget's branding and positioning
  • Content: change the topics and FAQs presented to a customer using the widget
  • Preferences: toggle basic settings for your widget
  • Embed Code: view the code to embed your widget in your web page

Appearance

This menu allows you to fine-tune the look and feel of your widget. There are 3 sub-menus on this page.

Branding

Your brand design must reflect on each customer touchpoint, including your web widget. Click Branding to edit the following:

  • Brand logo
  • Welcome message and sub-message (Optional)
  • Conversation title
  • FAQ title
  • Brand color (Widget theme): Choose between solid and gradient
  • Button color
  • Widget launcher color
  • Chat background pattern

Position and Behavior

Click Position and behavior to edit the following:

  • Messenger Visibility: Make your widget always visible, hidden, or only visible within your working hours (Default Business Hours).
  • Widget launcher type: Show the widget as a custom icon or as a button with custom text.
  • Size: Choose between default (wide) or compact.
  • Position: Show your widget launcher on the bottom left or bottom right of the page.
  • Position Offset in pixels: Fine-tune your widget's position.
  • Remove Freshworks branding: This is only available on paid plans.

Custom CSS


Content

This menu lets you configure the main content of the widget, which includes:

  • Topics: These are conversation contexts that can be routed to different teams or bots. To create topics, go to Admin Settings > Configuration and Workflows > Web Chat Topics. See What are Topics in Freshchat?
  • FAQ categories: These are self-service articles that are displayed within the widget. To create FAQ categories and articles, go to FAQs from the left navigation bar. See How to create FAQs?

Once you've created your topics and FAQs, you can add them to your widget from this menu and arrange them to your liking.

The content menu allows you to select topics and FAQ categories.


Important: When you create new topics or FAQ categories, you must manually add them to your widgets. You can add up to 100 topics or FAQ categories to a widget.


Preferences

This menu lets you configure the following options:

  • Enable trusted domains: Define specific URLs on which the widget can load.
  • Show typing indicator: Show your customer when an agent is typing a response.
  • Browser notification: Alert your customer in the browser tab when a response is sent.
  • Notification sound: Alert your customer with a sound when a response is sent.
  • Allow customers to attach files: Let your customers share media or other files in the chat.
  • Hide resolved conversation history: Prevent customers from seeing past resolved conversations.
  • Show privacy policy: Add a privacy message at the top of the conversation and link to your privacy policy.
    Example of privacy policy text and link.


Embed Code

To enable the widget for your customers, you need to embed its code on your website. Retrieve your unique code snippet from this menu. Paste the code snippet on every page of your website where you want your Freshchat web widget to appear.

  • You can also get the code for user properties and bot conversation properties from this page. 
  • For bot conversation properties, save the topic mappings before generating the code for the same. 
  • For advanced customizations, visit our developer documentation here.


Bot mapping

You can seamlessly link any number of topics to bots from the Web Chat page in the Bot mapping tab. You can further configure advanced options from the topics page. This mapping applies to all the widgets. 

A sample view of the bot mapping page.


Supported message types

Message TypeDirectionWeb - Conversations WidgetWeb - Self-Service Widget
TextUser to agentYesYes
User to BotYesYes
Agent to userYesYes
Bot to userYesYes
ImageUser to agentYesYes
User to botYesYes
Agent to userYesYes
Bot to userYesYes
VideoUser to agentYesYes
User to BotYesYes
Agent to userYesYes
Bot to uservia public URLvia public URL
AudioUser to agentYesYes
User to botYesYes
Agent to userYesvia App
Bot to userYesYes
FileUser to agentYesYes
User to botYesYes
Agent to userYesYes
Bot to userYesComing soon
EmojiUser to agentYesYes
User to botYesYes
Agent to userYesYes
Bot to userYesYes
GIFsUser to agentYesYes
User to botYesYes
Agent to userYesYes
Bot to userYesYes
StickersUser to agentNANA
User to botNANA
Agent to userNANo
Bot to userNANo
AutomationBotsYesYes
Structured Messages
ArticlesBot to userYesYes
CarouselsBot to userYesYes
ButtonsBot to userYesYes
Dropdown ListBot to userYesYes
Message events
DeliveredUser to agentNoYes
Agent to userYesNo
ReadUser to agentYesYes
Agent to userNoNo
TypingUser to agentYesNo
Agent to userYesNo
Consumer Profile
User NameYesYesYes
User ImageNANANo