opendialog.aiStart BuildingTalk to an expert

SDK

This section describes the WebChat SDK and the functionality you can access as a developer using WebChat within your own application.

You can find full examples of how to use the WebChat SDK in the dedicated Webchat SDK site.

Getting started with the WebChat SDK

The WebChat SDK can be used in any website or browser-based application and requires a basic understanding of Javascript to set up and use. These docs assume you are familiar with Javascript and, ideally, a little Typescript.

Adding WebChat SDK to your website

To add the SDK code to your site, insert the following code into your application:

index.html
<!-- In the <head> section of your page: -->
<link rel="stylesheet" href="https://assets.webchat.opendialog.app/style.css">

<!-- Within the body of your page, include a container to load WebChat into -->
<div id="od-webchat"></div>

<!-- Before the closing <body> tag of your page: -->
<script src="https://assets.webchat.opendialog.app/opendialog-webchat.umd.mjs"></script>

Initialise your WebChat widget

// Provide some settings for your WebChat widget. 
// You can find the basic settings required in the Publish section of the OpenDialog platform
const settings = {
    url: 'your_bot_url',
    appKey: 'your_app_key',
    sdkEnabled: true, // Make sure to include this one!
    language: 'en',
    user: {
      custom: {
        selected_scenario: your_scenario_id
      }
    },
    customSettings: {
      openCta: {
        title: 'Hello!👋 Click me!',
        borderRadius: '50px',
        width: '280px',
        height: '80px',
        background: '#001abf'
      }
    }
  }
  
  // Instantiate your WebChat widget, passing in the element you want to load it into
  const webchat = new ODWebChat.OpenDialogChatSDK('#od-webchat')

  // Initialise your WebChat widget, passing in your settings
  webchat.init(settings)

You can find more info about the settings required to launch a WebChat instance here

PreviousHow to enable JavaScript in your browserNextMethods

Last updated