Versions Compared

Key

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


Html
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Html
<div class="fb-like" data-href="#" data-layout="button_count" data-action="recommend" data-size="large" data-show-faces="true" data-share="true"></div>

...

Scroll export button
scopecurrent
template-id0fa09813-8b86-460a-aa1d-ef450a80e9ce
quick-starttrue
add-onScroll PDF Exporter

Info

This guide explains how to configure x-bees website widget.

Other x-bees documentationx-bees documentation.

Created: June 2022

Updated: September 2023

Permalink: https://confluencewildix.wildixatlassian.comnet/wiki/x/wQDCBgMhTOAQ

Introduction

x-bees 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 interface.

Supported features:

  • Chat
  • Video conference
  • Desktop sharing
  • File exchange

Requirements

  • Min. supported WMS version:

...

  • 6.01.20220621.2 and higher
  • Licensing: x-bees-SuperBee for managing Kite widgets; at least x-bees-Standard for access to Kite settings
  • Browser compatibility:

...

  • Google Chrome
    Mozilla Firefox
Note

...

Notes:

  • We recommend using the latest stable browser version

...

  • Full support for Mozilla Firefox and Safari is coming soon


Warning

Limitations: x-bees website widget doesn't work if browser is in Incognito mode. 


  • Make sure that these external servers and ports are open on your router/ Firewall:
    • https://

...

    • app.x-bees.

...

    • 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 of x-bees website widget consists of two steps:

  • Creating website widget in x-bees - can be done by any PBX user (holding necessary license)with x-bees-SuperBee license
  • Implementation on the website – carried out by website webmaster / softhouse

Create website widget

  1. Click on your user picture in the upper left-hand part of the screen to open Settings
  2. Choose the option Kite settings:


  3. On Kite Settings screen, navigate to Website widgets tab:
    Image Removed.

  4. Click Create new widget:





  5. Fill in the form:
    • Widget name: give name to your widget to easily find it in the widgets list
    • 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 (the default text for a personal widget is: Send me a message, for a group - Send us a message)
    • Service name: enter name to be displayed on the widget, e.g. Support agent
    • Note: To create widget for a

      Create widget to: choose whether you crate create this widget for An agent or Group of agents

      Note

      (Group of agents

      , admin rights are required.

      corresponds with a Call group in WMS)

      • Agent full name (if An agent option was chosen in previous step): start typing agent name or extension and choose the agent for whom the widget is created

      • Inbound service (if option Group of agents was selected): choose the Call group you're creating the widget for 

        Note

        Note: In case a Call group doesn't have any agents, it is not displayed in the list of available Call groups.  


        You can see preview of your widget with the entered information on the right, in Kite widget preview section.  

        Image Added
        You can also choose custom color for your website widget by clicking Change color in the Widget color section:
         Image Added

    Click Save.

      • Also, you can copy color from another widget: click the Copy from widget button and choose the widget you want to copy the color from:

        Image Added

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

        Image Added

        Note

        Note:

        • The custom color is applied for the widget background and buttons.
        • For conversation, the default blue color is used.
        • In case custom color is too light, the text on the widget is colored black, while “Powered by x-bees” at the bottom of the widget remains the default blue.



  6. Click Save
  7. Under Kite widget preview on the right you have

    two

    the options: Copy to clipboard or Download file.

     


    Also, you can copy the widget link in the Share with customers field:

    Image Added

Note

NoteNotes:

  • All widgets are available for all users of all PBXs belonging to the same Customer (no matter whether PBXs are in WMS network or not)
.

Current limitations:

  • User from one PBX in WMS network can reset Kite widget configuration of a group or agents of another PBX
  • Messages are not delivered if user writes a message via Kite widget to himself or to a group he belongs to
  • Forward button in message menu currently doesn’t work
  • It is not possible to save pictures or video from conversation (only preview available)
  • After pressing user avatar near the received message or in the Read by section, a page with blank message boxes is displayed
  • After reloading the page, the title of the conversation is changed from the agent's full name to "Support agent" (or another data inserted into “Service name” field during Kite widget setup)

Embed widget on a website

Html
<div class="fb-like" data-href="#" data-layout="button_count" data-action="recommend" data-size="large" data-show-faces="true" data-share="true"></div>
  • An agent who has never logged into x-bees, is not displayed as Kite agent (either as a member of a group of agents or individually)

The created widgets are displayed on the Website widgets tab on Kite Settings screen. There, you can edit or delete them if required, just by clicking Edit/ Delete button correspondingly. 

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. 

Macrosuite divider macro
dividerTypetext
dividerWidth70
emoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
textColor#000000
dividerWeight2
labelPositionmiddle
textAlignmentcenter
iconColor#0052CC
fontSizemedium
textNot finding the help you need? Join the Facebook group to ask a question!
emojiEnabledfalse
dividerColor#DFE1E6
dividerIconbootstrap/CloudsFill

Button macro
buttonTextFacebook
isButtonShadowOntrue
emoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonBorderColor#4267b2ff
buttonColor#4267b2ff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonIconColor#ffffff
buttonWidthDetection46
buttonHoverColor#ffffff
buttonIconfont-awesome/FacebookSquare
buttonTypeicon_left
buttonLink{"link":"https://www.facebook.com/groups/wildixtechwizards","source":"direct"}
buttonNewLink
buttonRadius3
buttonShadow0
id228
emojiEnabledfalse
buttonWidth20