Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Expand
titleIntroduction

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. 

...

info

iconfalse

For more information, see the Proactive Web Chat section.

Note
iconfalse

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)


  • 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.
    Expand
    titleConfiguring a Web Widget


    you begin:
    Note
    iconfalse
    titleBefore
    You Begin

    To configure a chat

    web widget

    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 widgetWeb 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.

      Color that you want to be displayed on your website for the widget
      FieldDescription
      NameName for you A name to identify the widget on the LiveVox Portal.
      DescriptionDescription for The description of the widget.
      HeaderTitle that you want to be displayed The title of the widget as it appears on your website for the widget.
      StyleStyle for The style of the widget that you want to be displayed on your website (that is, badge, bar, or button) as it appears on your website.Color
      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. 

      Info

      Customers see the badge when the web widget is minimized.


      ColorThe color of the widget as it appears on your website.


      Tip
      iconfalse
      • 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 iconImage Modified).
      • If you want to only create a web widget Web Widget (that is, if you want to configure the web widget Web Widget later), click click Save. If you want to also configure the web widgetWeb 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 widgetWeb Widget), click the Chat tab, and then specify values in the fields/sections.

      Info
      iconfalse
      section in
      •  in the Product Documentation.
      Tip
      iconfalse
      • You can preview an active chat web widget Web Widget (that is, the chat web widget Web Widget during the specified business hours) by selecting the Online checkbox in the Preview section.
      • You can preview an inactive chat web widget Web Widget (that is, the chat web widget 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.

      Info
      iconfalse
      • For information about the fields, see
      the section
      • 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.

      Info
      iconfalse

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


    6. Click Save.
      The web widget 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. 
    Tip
    iconfalse


    Expand
    titleProactive Web Chat

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


    Expand
    title
    Example
    • 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
    Expand
    titleCreating a Rule
    Creating a Rule

    To create a rule:

    1. In the Web Widget Detail window, on the Chat tab, click
    Note
    iconfalse

    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.

      Field
      Info
      Description
      icon
    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.
    false
    Tip
    iconfalse
    • You can add multiple conditions for a rule by using clicking the Add button of the Condition section. You can also add multiple rules for a web widget Web Widget by using clicking the Add button of the Rules section.
    • You can delete a condition by using clicking the close icon delete iconImage Modified next to the condition that you want to delete.


  • Click Save.
    The rule is created.

    Tip
    iconfalse

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



  • false
    Expand
    titleDeploying a Web Widget

    To be able to use a web widget 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.

      Note
      iconfalse

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

    Info
    icon

    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.



    Expand
    titleCopying a Web Widget

    To copy a web widget:

    In

    Web Widget, in the Web Widget window, hover over the widget that you want to copy

    .
    The Copy icon Image Removed appears on the widget.
  • Click the Copy icon Image Removed.
    The Copy Web Widget window appears.
  • 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.
    Tip
    iconfalse
    • 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.

    the Copy icon Image Added.


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

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

    Expand
    titleDeleting a Web Widget

    To delete a web widget:

    In

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

    .
    The Delete icon Image Removed appears on the widget.
  • Click the Delete icon Image Removed.
    The Confirm window appears.
  • Click Yes.
    The web widget is deleted.
  • Expand
    titleKB Widget Fields
    FieldDescription
    Enable Knowledge Base
    Info
    iconfalse
    • 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.

    Info
    iconfalse

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

    Expand
    titleTicketing Widget Fields

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

    FieldDescriptionEnable Ticketing

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

    Tip
    iconfalse

    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.

    Info
    iconfalse
    Only published ticket forms appear in the drop-down list

    .