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


Create a new channel in NativeChat

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


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.


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


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"


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