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.

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.

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.

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

For further modifications, apply custom CSS from this sub-menu. Your front-end developer can change the font type and size, edit the header and footer elements, adjust the spacing between elements, and much more.

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.

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.
  

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.

Note: You can also enable JWT user authentication for the web chat widgets.

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. 

Supported message types