Engage Voice | Configuring chat widgets
As discussed in Intro to chat widgets, configuring a chat widget requires specifying a number of configuration parameters that define the appearance and functionality of the widget. For example, you can specify different behavior for the widget based on whether your digital queue is open or closed (per your business hours). Based on your configuration, your customers will know whether your agents are available to chat.
As you configure the various chat widget settings, keep looking in the Preview section of the page to see an updated preview of the expected appearance of the chat widget. As you adjust the configuration settings, verify that your widget appearance meets your needs. For example, when configuring elements for the widget, you can change the order of elements by dragging and dropping them, and see your changes update in the preview.
Configuring a chat widget
To configure a chat widget, follow these steps:
1. Navigate to Routing > Chat widgets via the left-hand navigation bar
2. Click New Widget to launch the Configure Widget Details configuration page
3. Enter a Title for the chat widget. You will select this title when assigning the widget to a digital queue
4. Enter an optional Description for the chat widget
5. On the Global Settings tab, configure the general appearance settings (we’ll discuss each setting below)
6. On the Open Settings tab, configure the settings that apply when the digital queue is open (we’ll discuss each setting below)
7. On the Closed Settings tab, configure the settings that apply when the digital queue is closed (we’ll discuss each setting below)
8. On the Chat Settings tab, configure the settings that apply to chat (we’ll discuss each setting below)
9. Click Save to save your chat widget
Each of the chat widget settings is described below in Chat widget configuration settings.
Chat widget configuration settings
Now that we’ve learned how to add a chat widget, let’s review the various chat widget configuration settings.
General chat widget settings
Let’s review general chat widget settings first. We’ll start with some of the basic settings you can configure.
- Title: Name for the chat widget. You’ll select this title when assigning a widget to a digital queue
- Description: Text description of the chat widget
Global chat widget settings
Let’s review global chat widget settings. We’ll review settings that apply to any chat widget you configure.
- Height: Height in pixels for the chat widget
- Width: Width in pixels for the chat widget
- Page Position: Position on the web page you’d like the chat widget to appear
- Bottom Right: If selected, the chat widget will appear in the bottom right corner of the webpage
- Bottom Left: If selected, the chat widget will appear, the chat widget will appear in the bottom left corner of the webpage
- Launcher: Method by which a customer can launch the chat widget
- Default: The chat widget will automatically pop up on the webpage
- Floating circle: The chat widget will pop up by clicking a floating circle chat icon
- None: The chat widget launcher is invisible
- Color: Background color of the widget. Specify in RGB format, such as rgb(255, 255, 255)
- Font Family: List of available fonts for the chat widget
- Color (Font): Color of the font. Specify in RGB format, such as rgb(255, 255, 255)
- Size: Font size in pixels
- Color (Border): Color of the widget border. Specify in RGB format, such as rgb(255, 255, 255)
- Radius: Radius in pixels for the border of the chat widget
- Width (Border): Width in pixels for the border of the chat widget
- Animation: Enables a slide animation of the chat widget on a click or timer
- Pop timer: Time (in seconds) that will pop the chat widget when the timer elapses
Open and Closed chat widget settings
Let’s review chat widget settings that apply when a digital queue is open and closed.
- Message: Message that will send to a customer when a digital queue is open, or when it is closed
- Font color: Color of the message font. Specify in RGB format, such as rgb(255, 255, 255)
- Background color: Background color for the message. Specify in RGB format, such as rgb(255, 255, 255)
- Available Elements: Element you can add and configure for the chat widget
- Checkbox: Checkbox element you can add to the widget to gather a required or optional response
- Text Input: Text input element you can add to the widget to gather required or optional text
- Text Area: Free form text box element you can add to the widget
- Select List: Dropdown list with you can add to the widget with configurable selections
- Radio Buttons: Radio button element you can add to the widget
- Display Text: A piece of text you can add to the widget that will display to the user
- Button text: Text that will appear on the button a client clicks to submit a message, such as ‘Submit’
Chat settings
Let’s review settings that control the chat behavior for the chat widget.
- Font color (Incoming): Font color for incoming messages. Specify in RGB format, such as rgb(255, 255, 255)
- Background color (Incoming): Background color for incoming messages. Specify in RGB format, such as rgb(255, 255, 255)
- Font color (Outgoing): Font color for outgoing messages. Specify in RGB format, such as rgb(255, 255, 255)
- Background color (Outgoing): Background color for outgoing messages. Specify in RGB format, such as rgb(255, 255, 255)
- Corner Radius: Radius from 1-10 pixels for the corner of the chat bubble
- Show timestamp: Shows a timestamp that will appear for each message in the chat
- Show typing indicator: Shows an indicator when an agent is typing a response
- Show names: Show names that prefix messages in the chat
- Play notification sounds: Plays a notification sound when a message is received
© 1999-2022 RingCentral, Inc. Tous droits réservés.