Web

Kinvey Chat allows publishing a chatbot on your website just by copying and pasting the embed code. Web Site Widget is then displayed in the lower right corner of your webpage.

Setup

Create a new channel in Kinvey Chat

To receive messages and other events sent by Web Site Widget users, you need to enable Web Site Widget channel.

  1. Open the Channels & Publishing section of your Kinvey Chat bot.
  2. Click the Enable button for Web Site Widget.
  3. Click the Generate embed code button. You will receive your embed code for any web page.
  4. Copy and paste the following code before the </body> tag on your website to display the chat prompt widget.

Frame the webchat URL yourself

If you would like more flexibility in displaying your bot, feel free to frame your webchat URL as you desire.

Test your bot

Now you should be able to message your Web Channel by simply clicking on the chat prompt button in the top right corner and sending it a message.

Configuration

chat (required)

Configuration for the chat

  • bot (required) Configuration for the bot to connect to. Contains the following parameters:

    • id (required) The id of your chatbot.

    • avatarUrl (optional) Url of the avatar of the bot.

    • name (optional) Name with that each bot message will be labelled in the chat.

  • channel (required) Configuration of the channel to connect to.

    • id (required) The channel id to connect to.

    • token (required) A unique token required to connect to the channel.

  • googleApiKey (optional) This is an API key from the Google Cloud Platform used to display location picker inside the webchat.

  • defaultLocation (optional) Default location to center the location picker to in case the user declines the prompt to allow geolocation in the browser.

  • locale (optional) Specify the major locale of the widget. Currently supported major locales: ‘en’, ‘ar’, ‘pt’, ‘de’, ‘es’, ‘fi’, ‘bg’, ‘it’.

  • placeholder (optional) The placeholder text shown in message edit box.

  • submitLocationText (optional) The submit button text used in location picker that can be popped from send message area of widget.

  • css (optional) An array with urls with CSS file defining a custom theme. You can create a theme with Kendo Theme Builder.

  • session (optional) Configuration of each session when the user opens the widget.

    • clear (optional) If true each time the user will open the widget to a new session with no messages from previous sessions shown.

    • userMessage (optional) A message to be sent automatically, on the user’s behalf, when the webchat window is opened. You can send an empty message to simply trigger the bot’s introduction.

  • user (optional) Configuration of the user to start the chat session with.

    • id (optional) A unique id to identify a user.

    • name (optional) Name with that each user message will be labelled in the chat.

    • avatarUrl (optional) Url of the avatar of the user.

id (required)

A unique identifier of the chat widget.

origin (required)

Event origin that will be used to filter incoming messages to the widget.

display (required)

Configuration of how the chat widget is shown.

  • mode (required) ‘modal’ or ‘inline’. ‘modal’ install a launcher at the bottom right corner of the web site which opens the chat in a modal window. With ‘inline’ you can frame the chat window to your preference.

  • launcher (optional) Configuration of the chat widget launcher in ‘modal’ mode.

    • openIconUrl (optional) Custom icon for the open chat widget button.

    • closeIconUrl (optional) Custom icon for the close chat widget button.

  • containerId (required in ‘inline’ mode) Id of the HTML element that will host the chat widget.

Functions

The Kinvey Chat Webchat SDK registers a global object Kinvey Chat used to control the webchat window.

load

Configures the webchat window with given settings. Should be invoked only once.

var config = {
    id: 'example-chat',
    origin: 'my-origin',
    display: {
        mode: 'modal'
    },
    chat: {
        bot: {
            id: "59eef864b8c3123"
        },
        channel: {
            id: "46a1245-93a9-dfg1-914f-123ff3066",
            token: "26a414f-91a9-d2h1-814f-123ff3065"
        }
    }
};
Kinvey Chat.load(config);

removeChat

Close the chat window: Kinvey Chat.removeChat('example-chat').

Feature Comparison

Feature Facebook Viber Web
user profile info1 yes yes no
user timezone no no yes
quick replies yes yes yes
single select yes yes yes
carousel yes no2 yes
location picker yes yes3 yes4
date picker no no yes
authentication yes yes yes
handover yes no no
file upload yes yes yes
typing indicator yes no yes
  1. includes first name, last name and avatar URL 

  2. shows single select instead 

  3. mobile version only 

  4. requires a Google Cloud API key and falls back to the default location if the user does not grant permission to the browser to use geolocation.