TABLE OF CONTENTS

• Plan-wise availability
• 1. Create widgets
• 2. Adding Topics and FAQ categories to the widget
• 3. Customize your widget
  • a. Change branding
  • b. Change Position/behavior
  • c. Custom CSS
• 4. Advanced configurations for the web widget
• 5. Embed page
• 6. Bot mapping

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

Note: You must manually add Topics and FAQ categories to the widget when you create a new Topic/FAQ category.

Freshchat allows you to create and deploy multiple widgets. This enables you to offer personalized support to your customers.

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 needs to be unique.

With multiple widgets, customers can have unique experiences on different pages, tailored to their needs at the time. Let’s look at how to set up and manage multiple widgets on Freshchat.

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.

1. Create widgets

• Navigate to Channels > Web Widget to create and configure widgets. The default web widget is already available for configuration. You can choose to configure the same or create a new widget.

• To create a new widget, click the ‘New widget’ button and follow the instructions.

• You can choose to clone or delete a widget by clicking on the ‘options’ button next to each widget.

2. Adding Topics and FAQ categories to the widget

Once you have created a widget / chosen the default widget, you can now choose to configure the same. The first step is to configure the main content of the widget, which includes topics and FAQ categories.

• Click on the widget of your choice > Content tab 
• You can now add/remove Topics and FAQ categories for the widget. You can also change their order.
• To manage topics for the web widget or learn more about topics, check out What are Topics in Freshchat.
• To learn how to manage FAQ categories and articles, check out How to create FAQs

3. Customize your widget

You can customize your widget under the ‘Appearance’ tab. You can modify the branding on your widget and its position and behavior.

a. Change branding

Your brand design must reflect on each customer touchpoint, including your web widget. You can customize the look and feel of your widget on this page. On the ‘Appearance’ tab, click on ‘Branding’ to edit the following:

Brand logo Welcome message and sub-message (Optional) Conversation card title message FAQ title message Brand color (Widget theme) : Solid / Gradient Button color Widget launcher color Chat background pattern

b. Change Position/behavior

Click on the ‘Position and behavior’ tab to edit the following:

Messenger Visibility: With the Messenger Visibility option, you can make it stay visible, hidden, or only visible within your working hours (Default Business Hours). You can see a preview of all your configurations on the right. Widget launcher type: It can be set as text or as a custom icon Size: Default(Wide) / Compact Position: Bottom Left / Bottom Right Position Offset in pixels for the widget Hide the Freshworks branding (only available on paid plans)

c. Custom CSS

If you’re not satisfied with the widget customization options available, you can step it up by applying custom CSS from this screen. You can change the font type, font size, edit the header and footer elements, among other CSS capabilities.

4. Advanced configurations for the web widget

• Click on the ‘Advanced options’ tab to customize the following actions for the web widget.

• Trusted domains: Trusted domains enable you to choose where to load your web widget from Freshchat. With trusted domains, you can ensure that your widget can only load on the specific domains you trust.
• Typing indicator: Typing indicators will display an agent typing indicator for your customers.
• Browser notification: Toggle this to on and alay browser notification sounds when your customers receive a message.
• Notification sound: Toggle this to on and play notification sounds when your customers receive a message.
• Allow customers to attach files: Toggle this to on and allow your customers to send files as attachments.
• Hide resolved conversation history: This flag will hide the conversation history for resolved conversations.
• Show privacy policy: This flag will show a link to your privacy policy in the conversation page 
  
  

5. Embed page

• To enable the widget for your customers, you need to embed its code on your website. 
• Click on the 'Embed' tab to access your unique code snippet.
• 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, please save the topic mappings before generating the code for the same. 
• For advanced customizations, visit our developer documentation here.

6. Bot mapping

You can link topics to bots seamlessly from the widget list page. You can further configure advanced options from the topics page. This mapping applies to all the widgets. 

Message Types Supported: