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
- Create widgets
- Adding Topics and FAQ categories to the widget
- Customize your widget
- Advanced configurations for the web widget
- Embed page
- Plan-wise availability
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
- Hide branding
All other conversations widget features are available on all plans.