Table of contents Menu

Client demonstration

Instructions for web

Example HTML page

The Seamly client can be integrated with your site. In case you are not able to try the client demonstration in an existing site, you can find a basic HTML example below:

<!doctype html>
<html>
  <body>
    <h1>Seamly client demonstration</h1>
    <div class="seamly-placeholder"></div>
  </body>
</html>

With either an existing site or the HTML example above, you can now follow the next instructions to get started with the Seamly client demonstration.

Load the script

Place the script below just before the end of the body:

<script>
  (function (d, t) {
    var src = "https://cdn.seamly-app.com/client-demo/client/v1/index.js";
    var g = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src = src + "?v=" + +new Date();
    g.async = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Initialize chat

Whenever you want to show/render the chat functionality you have to initialize an instance. You can do so by using the Seamly Window API as described below:

<script>
  window.seamly = window.seamly || [];

  window.seamly.push({
    action: "init",
    args: {
      layoutMode: "inline",
      parentElement: document.querySelector(".seamly-placeholder"),
    },
  });
</script>

Arguments

The init call accepts the following args:

  • layoutMode argument can have two values:
    • inline: To be used on the main contact page and will render the chat window inline.
    • window: To be used on all pages where a window version of the chat should be displayed.
  • parentElement argument must be a reference to a HTML element the chat UI will be rendered in. Only relevant in case layoutMode is set to inline, otherwise this argument can be omitted.
  • hideOnNoUserResponse argument is only relevant when layoutMode is set to window. It can have two values:
    • true: In case the chat should render only if user has interacted at some point in time.
    • false: In case the chat should always be rendered.

This will automatically use our demonstration account. In case you have received an API key from us to use with this script, you can add that as an apiKey property to the init-arguments like this:

<script>
  window.seamly = window.seamly || [];

  window.seamly.push({
    action: "init",
    args: {
      apiKey: "<insert-your-api-key>",
      layoutMode: "inline",
      parentElement: document.querySelector(".seamly-placeholder"),
    },
  });
</script>

Instructions for app/webview

Webview page

The Seamly client demonstration can also be used in an app through a webview. Load the following HTML page in a webview: https://cdn.seamly-app.com/client-demo/client/v1/app.html.

This will automatically use our demonstration account. In case you have received an API key from us to use with this script, you can add that as an apiKey query parameter like this: https://cdn.seamly-app.com/client-demo/client/v1/app.html?apiKey=your-key-goes-here.