Website widget configuration

Introduction

Kite widget is a professional solution for business communication based on the WebRTC technology that brings Unified Communications to the corporate website. Using the widget, website visitors can communicate with agents via chat, video conference, share data, all in just a few clicks. And the chat requests from website visitors are easily managed by PBX users via x-bees / Collaboration 7 interface.

Supported features:

• Chat
• Video conference
• Desktop sharing
• File exchange

Requirements

• For x-bees:
  • Min. supported WMS version: 6.01.20220621.2 and higher
  • Subscription plan: x-bees-Standard or higher to be website widget agent
• For Collaboration 7:
  • Min. supported WMS version: 7.01 and higher
  • Subscription plan: UC-Business or higher to be an agent of website widget
• Browser compatibility: Google Chrome
  
  

• Make sure that these external servers and ports are open on your router/ Firewall:
  • https://app.x-bees.com/
  • https://app.wildix.com/
  • https://api.x-bees.com/
  • https://login.x-bees.com/
  • https://chat.wildix-chat.com/
  • https://conference.wildix.com/
  • https://auth.wildix.com/
  • https://fs.wildix.com/
  • https://avatars.wildix.com/
  • https://cognito-idp.eu-central-1.amazonaws.com/

Configuration

Configuration website widget consists of two steps:

• Creating website widget – done by PBX admin 
• Implementation on the website – carried out by website webmaster

Create website widget

1. Go to WMS -> PBX -> Integrations -> Cloud integrations
2. Choose Kite:
   
   
   
3. Click Add new widget:
   
   
4. Enter Widget name and fill out Appearance Settings section. It is the content that will be displayed on the widget's Welcome screen:
   • Title: Enter agent name
   • Header title: enter title to be displayed on your website widget, e.g. Hello
   • Header subtitle: type subtitle for your widget header, e.g. How can we help you?
   • Button title: enter text to be displayed on the button e.g. Start new conversation
     
     
     
5. In Palette Settings section you can choose the widget background color. To choose color, click Change: 
   
   
   
6. Choose the preferred color for your widget:
   
   
   

   If you want to reset color to default, click Reset:
   
   
   

   Note:

   • The custom color is applied for the widget background and buttons.
   • For conversation, the default blue color is used.
7. If you wish to align widget availability with your business working hours, click on Working Hours Settings section and press Add rule: 
   
   
   
8. Set your business hours: 
   
   If needed, you can set multiple rules:
   
   
   

9. In Routing Settings, you can choose whether you want to route incoming conversations to an agent, service (corresponds with a Call group) or a bot (needs to be configured beforehand, see the documentation How to configure AI Chat Agents)
   
   
   
   

   Note: An agent who has never logged into x-bees / Collaboration 7, is not displayed as Kite agent (either as a member of a group of agents or individually)

10. If you wish to welcome customers with a predefined message, proceed to the Welcome Messages Settings and click Add message:  
    
    
    

11. Enter the text of the message and choose when it should be displayed, immediately or after 1-5 seconds:
    
    
    

    Note: It is possible to add up to 10 welcome messages.

    You can also add quick replies:
    
    
    

12. To configure routing settings during out of working hours, proceed to the Out of Working Hours section and choose where the incoming conversation should be routed: to an agent, service or bot:
    
    
    Set a Welcome message and quick replies if required:
    
13. At the right, you can see the preview of your widget. Once you've filled out the necessary details, click Add:
    
    
    
14. The widget appears in the Widgets list:
    
    
15. To copy the widget link, open the widget -> navigate to the Installation instructions tab (1) and copy the link in the Share with customers field (2): 

Edit website widget 

To edit website widget:

1. Go to WMS -> PBX -> Integrations -> Cloud integrations
2. Choose Kite:
3. Click the pencil (Edit) icon next to the necessary widget: 

Embed widget on a website

Widget implementation on a website is performed by website webmaster, by pasting the code before closing HTML </head> tag on the web page the widget has to be added to. 

You can find installation instructions on the Installation instructions tab of the widget: