Skip to content

Integrate Chat widget on your website

For a basic version of the webchat widget with standard configuration follow the instructions below. A copy-and-paste ready code snippet can be found on your framework integration page on:

http://member.dialogshift.com on page CONFIGURATION

Include from DialogShift CDN

...
<script
  type="text/javascript"
  src="https://cdn.dialogshift.com/sdk/latest/dialogshift-webchat-sdk.umd.js"
></script>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.dialogshift.com/sdk/latest/dialogshift-webchat-sdk.min.css"
/>
<script type="text/javascript">
  const client = Dialogshift.instance({
    id: '%id%',
  })
</script>
...

Install from NPM

npm i dialogshift-webchat-sdk --save

Quick start (TypeScript & ES2015)

import * as Dialogshift from 'dialogshift-webchat-sdk'
import 'dialogshift-webchat-sdk/bundles/dialogshift-webchat-sdk.min.css'

const chat = Dialogshift.instance({
  id: '%id%',
})

Your framework client ID can be found in your DialogShift member area.

Style Chat Button

You can style the chat button color (standard & hover) by adding CSS to the client configuration.

http://member.dialogshift.com on page CONFIGURATION

Example:

"websiteElementCss": ".ds-button {background-color: #95805d; } .ds-button:hover {background-color: #d3b683;}",

Style Chat Teaser

You can style the chat teaser font size and color of close button by adding CSS to the client configuration.

http://member.dialogshift.com on page CONFIGURATION

Example:

"websiteElementCss": ".ds-teaser {font-size: 16px;}  .ds-teaser__cross {  background-color: #95805d!important; }",