Widget Help

A Web Widget is an independent application that you can embed into your website to provide your customers (including visitors) with a single support system by enabling them to chat with an agent, access your Knowledge Base (KB) articles, or submit a ticket. A Web Widget can be configured to include any or all of the following functions: Chat, KB, Ticketing

A Web Widget with the chat function (that is, a chat Web Widget) can be configured to be proactive. A proactive chat Web Widget contacts the visitors browsing your website through a live chat when certain predefined conditions are met, and it displays a greeting that can be customized based on the context. 

To configure a Web Widget:

1. In the Web Widget window, click Add a New Web Widget.
   The Web Widget Detail window appears.

2. On the General tab, specify values in the following fields.

   Field	Description
   Name	A name to identify the widget on the LiveVox Portal.
   Description	The description of the widget.
   Header	The title of the widget as it appears on your website.
   Style	The style of the widget (that is, badge, bar, or button) as it appears on your website.
   Badge	The icon for the badge style. This field appears when the value in the Style field is Badge. The field contains a list of industry-standard icons. You can select an icon to represent the web widget on your website. This enables you to customize how customers see the web widget on your website.  Customers see the badge when the web widget is minimized.
   Color	The color of the widget as it appears on your website.

   • A dynamic preview of the widget appears in the Preview section of the window.
   • You can preview the style of the widget (that is, badge, bar, or button) by minimizing the current preview in the Preview section (that is, by clicking the Minimize icon ).
   • If you want to only create a Web Widget (that is, if you want to configure the Web Widget later), click Save. If you want to also configure the Web Widget, as required, perform all or any of the following steps.

3. If you want to configure the chat function for the widget (including configuring a proactive chat Web Widget), click the Chat tab, and then specify values in the fields/sections.

   • For information about the fields, see Chat Widget Fields in the Product Documentation.
   • You can preview an active chat Web Widget (that is, the chat Web Widget during the specified business hours) by selecting the Online checkbox in the Preview section.
   • You can preview an inactive chat Web Widget (that is, the chat Web Widget outside the specified business hours) by clearing the Online checkbox in the Preview section.

   
   

4. If you want to configure the KB function for the widget, click the Knowledge Base tab, and then specify values in the fields.

   • For information about the fields, see KB Widget Fields in the Product Documentation.

5. If you want to configure the ticketing function for the widget, click the Ticketing tab, and then specify values in the fields.

   For information about the fields, see Ticketing Widget Fields in the Product Documentation.

6. Click Save.
   The Web Widget is created, and it appears in the Web Widget window. The widget displays three icons that represent chat, KB, and ticketing; a selected icon indicates that the corresponding function is enabled for the widget. 

The Rules section on the Chat tab of the Web Widget Detail window enables you to proactively initiate a chat when a customer visits your website by displaying a chat invitation message that is triggered by one or more rules, each of which contains one or more conditions. A condition is composed of a variable, an operator, and a value.

You can define the rules based on customer behavior. For example, you can initiate a chat if a customer has remained idle for over 20 seconds on a specific page or if they cancel a payment. 

The chat invitation message appears in a pop-up window to your customers on your website. They can accept or decline the chat invitation by clicking the Chat Now or Maybe Later button in the window. When they click the former button, a chat window appears and they are connected with a bot or an agent. When they click the latter button, the chat invitation is closed. They can, however, initiate a chat if needed by clicking the Web Widget launcher on your website.

To create a rule:

1. In the Web Widget Detail window, on the Chat tab, click Add.
   The Edit Rule window appears.

2. Specify values in the fields.

   • For information about the fields, see Chat Widget Fields in the Product Documentation.
   • You can add multiple conditions for a rule by clicking the Add button of the Condition section. You can also add multiple rules for a Web Widget by clicking the Add button of the Rules section.
   • You can delete a condition by clicking the close icon  next to the condition that you want to delete.

3. Click Save.
   The rule is created.

   You can delete a rule by hovering over the rule and then clicking the close icon .

To be able to use a Web Widget on your website, you must copy the code associated with the widget into the website. To do so:

1. In the Web Widget window, hover over the widget whose code you want to copy into your website.
   The Snippet Code option appears on the widget.
2. Click the Snippet Code option.
   The Code Script window appears. This window displays the code associated with the widget.

3. Click Copy.
   The code is copied. You can now paste the code into the HTML source code of your website.

   Any further changes to the widget (in the Web Widget window) are automatically applied to your website.

To copy a Web Widget, in the Web Widget window, hover over the widget that you want to copy, and then click the Copy icon .

To delete a Web Widget, in the Web Widget window, hover over the widget that you want to delete.