Embedding in browser (Lagacy)

👍
New improved support for webchat is available!
Singe version v234 there is completely new way to configure webchat on You website. You can now configure it through Channels module through UI!

🚧
This document shows legacy way to embed webchats on HTML websites
Please note that since version v234 configuring webchat like stated below is not recommended and may be disabled in the future. Please migrate to configuration through Channels module.

It is possible to embed webchat on almost any page and it requires only a few steps.

Load setting up script

Necessary step. You need to add the following line to the root HTML file of your app (location of root HTML file may vary based on the technology of your webapp).

<script src="https://cdn.sentione.com/chat-ui-launcher/chat.X.XX.X.js"></script>

X - the version of the script to configure the chat depends on the environment version.

This page always describe the newest version of webchat. In case you would like to see changelog of webchat click here:

Initialize and run webchat

After the script is loaded, your window object will have a sentiOneChat property. This is the main object used to initialize and manipulate webchat from within the host page.

<script>
  window.sentiOneChat.initWebChat(Configuration object - read below);
</script>

Examples

Minimal configuration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
		<script src="https://cdn.sentione.com/chat-ui-launcher/chat.1.54.0.js"></script>
    
  <script>
      window.sentiOneChat.initWebChat({
        chatSrc: 'https://webchat.app.chatbots.sentione.com/fullscreen',
        projectId: '6897f1fc-8106-4f6e-845e-9303249edbda'
      })
    </script>
</head>
<body>
    <h1>Your webchat is ready to use!</h1>
</body>
</html>

Playground: https://jsfiddle.net/dnr6tyhk/

Automatically opening webchat after one second

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
		<script src="https://cdn.sentione.com/chat-ui-launcher/chat.1.54.0.js"></script>
    
  <script>
      window.sentiOneChat.initWebChat({
        chatSrc: 'https://webchat.app.chatbots.sentione.com/fullscreen',
        projectId: '6897f1fc-8106-4f6e-845e-9303249edbda',

        autoStart: 1000
      })
    </script>
</head>
<body>
    <h1>Your webchat is ready to use!</h1>
</body>
</html>

Set custom header title and input placeholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.sentione.com/chat-ui-launcher/chat.1.54.0.js" type="application/javascript"></script>

    <script>
      window.sentiOneChat.initWebChat({
       	chatSrc: 'https://webchat.app.chatbots.sentione.com/fullscreen',
        projectId: '6897f1fc-8106-4f6e-845e-9303249edbda',

        appearance: {
          inputPlaceholder: "Type your message here...",
          headerTitle: "Awesome webchat!"
        }
      })
    </script>
</head>
<body>
    <h1>Your webchat is ready to use!</h1>
</body>
</html>

Styling webchat

There is a possibility to set custom styles of webchat. You should use this method (field: appearance.styels to style inner elements of webchat and webchat trigger button).

You can do it in two ways:

provide custom CSS styles:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.sentione.com/chat-ui-launcher/chat.1.54.0.js" type="application/javascript"></script>

    <script>
      window.sentiOneChat.initWebChat({
        chatSrc: 'https://webchat.app.chatbots.sentione.com/fullscreen',
        projectId: '6897f1fc-8106-4f6e-845e-9303249edbda',

        appearance: {
          styles: {
            customCss: '.chat-header { background-color: red;}'
          }
        }
      })
    </script>
</head>
<body>
    <h1>Your webchat is ready to use!</h1>
</body>
</html>

provide link to external stylesheet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.sentione.com/chat-ui-launcher/chat.1.54.0.js" type="application/javascript"></script>

    <script>
      window.sentiOneChat.initWebChat({
        chatSrc: 'https://webchat.app.chatbots.sentione.com/fullscreen',
        projectId: '6897f1fc-8106-4f6e-845e-9303249edbda',

        appearance: {
          styles: {
            url: 'https://cdn.sentione.com/chat-ui-launcher/themes/dark-blue.css'
          }
        }
      })
    </script>
</head>
<body>
<h1>Your webchat is ready to use!</h1>
</body>
</html>

Change default position of webchat

Provided styles to this field (appearance.outerStyles) will be injected to host page. So you should use this field if you want to style position of webchat.

You can provide custom CSS or link to stylesheet. In below example you can see customCss to set webchat position with 500px right margin.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.sentione.com/chat-ui-launcher/chat.1.54.0.js" type="application/javascript"></script>

    <script>
      window.sentiOneChat.initWebChat({
        chatSrc: 'https://webchat.app.chatbots.sentione.com/fullscreen',
        projectId: '6897f1fc-8106-4f6e-845e-9303249edbda',

        appearance: {
          outerStyles: {
            customCss: '.socui-chat__button-iframe {right: 500px} .socui-chat__window {right: 500px}'
          }
        }
      })
    </script>
</head>
<body>
<h1>Your webchat is ready to use!</h1>
</body>
</html>

Updated about 3 hours ago