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

This feature is currently in the BETA phase. It will gradually be enabled for customers from October 2022. If you would like to request access to it earlier, please contact the Freshchat support team.


TABLE OF CONTENTS

 


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.


1. Create widgets


Navigate to Channels > Web Widget to create / 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 on 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.


Once you click on the widget of your choice, you will see configuration options for the same. Under the ‘Content’ tab, you can choose to add/remove topics and FAQ categories from the widget. You can also change their order.




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


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)




4. Advanced configurations for the web widget


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



a. Trusted URLs 

Trusted URLs enable you to choose where to load your web widget from Freshchat. With trusted URLs, you can ensure that your widget can only load on the specific URLs you trust.


b. Typing indicator

This flag will display an agent typing indicator for your customers.


c. Browser notification

This flag will send a browser notification sound when your customers receive a message.


d. Notification sound

This flag will play a notification sound when your customers receive a message.


e. Allow customers to attach files

This flag will allow your customers to send files as attachments.


f. Hide resolved conversation history

This flag will hide the conversation history for resolved conversations.



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. Plan-wise availability


Features available on the Growth plan and above: 

  • Multiple widgets
  • FAQs
  • Hide branding

All other conversations widget features are available on all plans.