Web Widget SDK

With our Web Widget SDK you get full programmatic control over the behaviour of our web widget. Below you find the API methods explained.

Load the script

As a first step to work with the Superchat Web Widget you need to add the script to the head tag of your website or web app.

<head>
    <script src="https://widget.superchat.de/sdk.js"></script>
</head>

Initialise the Web Widget

First, initialise the web widget. You can do so by calling the init function. The init function works with a couple of parameters.

applicationKey - required. Get the application key from your web widget settings here
hideWidget - optional. If set to true, hides the web widget by default. You might want to show it later using superchat.show() or superchat.open()
language - optional. By default we use the browser language of your website visitor or web app user to determine the language the Web Widget is shown in. If there is no matching language we fall back to your defined standard language. You can alter this behaviour by setting a language during initialisation. The language has to match one of your defined languages for the respective Web Widget, if this fails, we fall back to the defined standard language.

window.Superchat.init({
  applicationKey: <YOUR_APPLICATION_KEY>, // required
  hideWidget: boolean, // optional, set `true` to hide the web widget by default
  language: string // optional, any ISO2 language code you configured your web widget with
})

Show the Web Widget

You can show the web widget by calling show() like so:

window.Superchat.show()

Hide the Web Widget

As an opposite operation to showing the Web Widget you can hide the widget by calling hide().

window.Superchat.hide()

Open the Web Widget panel

There are different views of the Web Widget panel. There is a main panel view, a channel group view in case groups are set up, and a (individual) channel view. The channel view only exists for WhatsApp and the Live chat. Calling open on any other channel, will immediately direct the user to Instagram, Facebook, Email, SMS or any other channel type.

Open the main view

Open the main view by calling open() without any parameter.

window.Superchat.open()

Open a channel group

Open a channel group by calling open() with the groupId as parameter like so:

window.Superchat.open({groupId: "<channelGroupId>"})

Open a channel

Open a channel directly by calling open() with the channelId parameter set. You might want to add an optional message parameter. Adding the message parameter will prefill the chat input for live chat. For WhatsApp, Facebook, Email, and SMS, we will pre-fill the message body in the respective messenger with the text your message text.

window.Superchat.open({
  channelId: "<channelId>",
  message: "YOUR_MESSAGE_TO_SEND"
})

Set the language of the Web Widget

You might want to override the default language setting behaviour. For this, you can call setLanguage(). This function requires the parameter language in the form of an ISO2 country code. Both upper- and lowercasing works. The language you define also needs to be set as language option for your respective Web Widget.

window.Superchat.setLanguage("de")