Publish Your Chatbot on Your Website

Learn how to install and customize the NativeChat webchat widget.

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

Setup

Create a new channel in NativeChat

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

1. Open the Publishing section of your NativeChat bot.
2. Click the Add button for Website Widget to open the Web channel configuration generator.
3. Click the Add configuration 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.

  • longitude (required) The longitude to center location picker to.

  • latitude (required) The latitude to center location picker to.

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

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

  • context (optional) An object with entities and their values which can be used in the Cognitive Flow. For example, if you know something about your users before they’ve started the chat with the bot (like authorization tokens, user profile information, etc). you can then use it in the Cognitive Flow to improve the experience for end users by not asking them information you already know.

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

  • id (optional) A unique ID to identify a user. If not assigned, a random ID will be generated each time the user opens your chatbot page. For the correct functioning of Long Term Memory, you have to provide your users’ IDs. You can access this ID from your bot’s cognitive flow via the ExternalId property of the user entity

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

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

• showFilePicker (optional) If false hides the file picker button in the widget. Default value is true.

• showLocationPicker (optional) If false hides the location picker button in the widget. Default value is true.

• colorPrimaryBackground (optional) Any valid HEX color code (e.g. #007bff). Sets the background of user messages and the hover background color of quick replies + the border color and text color of quick reply messages. Please note: if you set a color that is too light (white, light gray), the quick reply buttons appearance will be broken. If you need such color scheme, use the css setting described above which allows a more detailed CSS theme definition.

• colorPrimaryText (optional) Any valid HEX color code. Sets the color of the text of user messages (only user messages, not the bot messages) and the hover text color of quick replies. If not provided but a colorPrimaryBackground is provided a contrasting value (black or white) is calculated and applied to text. For example if you pick dark blue, the text color will be set to white so that text is readable. If you set a light background the color of the text will be set to black.

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 installs a launcher at the bottom right corner of the website 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 NativeChat Webchat SDK registers a global object NativeChat 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"
        },
        session: {
            clear: true,
            userMessage: 'Book a doctor',
            context: {
                company: 'Progress Software',
                phone: '555 555 5555'
            }
        }
    }
};
NativeChat.load(config);

removeChat

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

Attachments

Files

The file picker allows users of your bot to upload files. Depending on whether you accept files at some point of the conversation or not you can enable/disable it via the chat.showFilePicker parameter of the configuration object.

Location

The location picker allows users to share a geographic location with the bot. Depending on whether your bot’s cognitive flow uses locations or not you can enable/disable it via the chat.showLocationPicker parameter of the configuration object.