Page tree

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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. 

For more information, see the Proactive Web Chat section.


A customer must use the following browsers to access the web widget:
Desktop

  • Google Chrome (latest version)
  • Firefox (latest version)
  • Microsoft Edge
  • Safari (latest version)

Mobile

  • Google Chrome (latest version)
  • Firefox (latest version)
  • Safari (latest version)

Before you begin:

  • To configure a chat web widget:
    • Ensure that the Inbound Chat message field of the services to which you want to route a chat (that is, chat services) contains a message template.

    • Ensure that the Chat Routing Token field of the chat services contains a value that indicates a routing token/department to which you want to route a chat (for example, Banking, Billing, Collections, or Support).

    • Ensure that the chat channel is enabled for the agents who are assigned to the chat services.
  • To configure a KB widget: Ensure that the KB portals that you want to make available for your customers are published and that the articles on the portals are public.
  • To configure a ticketing widget: Ensure that the ticket forms that you want to make available for your customers are published.

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.

    FieldDescription
    NameName for you to identify the widget.
    DescriptionDescription for the widget.
    HeaderTitle that you want to be displayed on your website for the widget.
    StyleStyle for the widget that you want to be displayed on your website (that is, badge, bar, or button).
    ColorColor that you want to be displayed on your website for the widget.
    • 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 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 section in Admin Guides 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 the KB Widget Fields section.

  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 the Ticketing Widget Fields section.

  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. 
  • You can view the web widget by double-clicking it in the Web Widget window.
  • You can modify the web widget by double-clicking it in the Web Widget window. Your name, along with the date (if applicable) and time when the widget was last modified, appears in the Web Widget Detail window.

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 using 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 using the web widget launcher on your website.

  • If you want to initiate a chat when a customer has spent a minute or more browsing your products on the webpage whose address is www.livevox.com/products, you can create a rule with the following attributes:
    • Name: Invite to buy
    • Invitation
      • Title: Looking for something?
      • Department: Sales
      • Prompt: Do you need help finding one of our products?
    • Condition
      • Evaluation strategy: Match all conditions 
      • Variable, Operation, and Value:
  • If you want to initiate a chat when a customer visits your website from a webpage whose address contains FAQ or if they spend more than two minutes on your website, you can create a rule with the following attributes:
    • Name: Invite to get support
    • Invitation
      • Title: Help is here
      • Department: Support
      • Prompt: Would you like to talk to our support department?
    • Condition
      • Evaluation strategy: Match any conditions 
      • Variable, Operation, and Value:
        • Time On Site > 120
        • Referral URL Contains FAQ

Before creating a rule, ensure that your contact center hours are open and that your agents are available to handle additional chat messages.

To create a rule:

  1. Click Add.
    The Edit Rule window appears.
  2. Specify values in the following fields.

    FieldDescription
    NameIntent of the rule (for example, Invite to buy or Invite to get support). This value is not displayed to your customers.
    Invitation
    FieldDescription
    TitleTitle of the chat invitation message that you want to be displayed in the pop-up window (for example, Let us help you). This field is optional.
    Image URLLink to the image that you want to be displayed within the pop-up window. This field is optional.
    Department

    Service to which you want the chat initiated by the rule to be routed when the chat invitation is accepted by a customer. This field displays values that appear in the Chat Routing Token field of your services.

    Prompt

    Chat invitation message that you want to be displayed in the pop-up window (for example, Do you need assistance with any of our products?).

    Condition
    FieldDescription
    Variable

    Parameter based on which you want the rule to be initiated. The following options are available:

    • Current URL: Address of the current webpage as it appears in the address bar of the customer.
    • Time On Site: Time (in seconds) spent by the customer on your website (any page), since the last page load.
    • Time On Current Page: Time (in seconds) spent by the customer on the current page on your website, since the last page load.
    • Referral URL: Address of the webpage from where the customer was directed to your website.

    Operation

    Operator that you want to be applied to the variable.

    Value

    Value that you want to be applied to the variable.
    Match all conditionsEvaluation strategy indicating that the rule is initiated if each condition is met.
    Match any conditionsEvaluation strategy indicating that the rule is initiated if any of the conditions are met.
    • You can add multiple conditions for a rule by using the Add button of the Condition section. You can also add multiple rules for a web widget by using the Add button of the Rules section.
    • You can delete a condition by using the close icon delete 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 using 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.

Your customers do not need to reopen the web widget to continue chatting with the agent as they navigate to other pages on your website where the widget is deployed. If the web widget snippet is on every page of your website, the widget is transitioned from one page to another.

To copy a web widget:

  1. In the Web Widget window, hover over the widget that you want to copy.
    The Copy icon  appears on the widget.
  2. Click the Copy icon .
    The Copy Web Widget window appears.
  3. In the Name field, enter a name for the widget, and then click Copy.
    A copy of the web widget is created, and it appears in the Web Widget window.
  • You can view the widget by double-clicking it.
  • You can modify the widget by double-clicking it. Your name, along with the date (if applicable) and time when the widget was last modified, appears in the Web Widget Detail window.

To delete a web widget:

  1. In the Web Widget window, hover over the widget that you want to delete.
    The Delete icon  appears on the widget.
  2. Click the Delete icon .
    The Confirm window appears.
  3. Click Yes.
    The web widget is deleted.

The following table describes the fields that appear on the Knowledge Base tab in the Web Widget Detail window.

FieldDescription
Enable Knowledge Base

Select this checkbox if you want to enable KB on the widget.

  • If KB is enabled on the widget, before deciding to chat with an agent, your customers can attempt to find the information they need by using relevant, downloadable KB articles, which appear as they type their message in the text box on the web widget. 
  • You can preview the KB on the widget by selecting this checkbox. The preview appears in the Knowledge base subsection in the Preview section of the window.
Knowledge Base

Select the KB portal that you want to make available for customers on the widget.

Only published KB portals appear in the drop-down list.

The following table describes the fields that appear on the Ticketing tab in the Web Widget Detail window.

FieldDescription
Enable Ticketing

Select this checkbox if you want to enable ticketing on the widget.

You can preview ticketing on the widget by selecting this checkbox. The preview appears in the Submit a ticket subsection in the Preview section of the window.

Ticketing

Select the ticket form that you want to make available for customers when they submit a ticket.

Only published ticket forms appear in the drop-down list.

  • No labels