Widget Integration | moinAI Technical Documentation

Just integrate this line into your Website with the proper IDs and the moinAI Chat Widget will show up on your site.

<script 
type="text/javascript" 
id="moinloader" 
src="https://widget.moin.ai/moin-loader.js?id=INSERT_YOUR_BOTID_HERE&channelid=INSERT_YOUR_CHANNEL_ID_HERE">
</script>

Injecting this multiple times wont affect anything. Once the Widget has detected another present Widget it wont load a second time. Keep this in mind when deploying multiple channels of the same bot on a site with e.g. multiple languages that might use the same CMS / GTM integration.

The script can easily have the defer or async tag if you prefer.

Once the Widget is integrated it will bootstrap itself and start working. If you wish to only show the widget at a later point consider either integrating the widget at a later point or using the Javascript client side API that we provide to correctly hide and the show the Widget as needed.

# Content Security Policy (CSP)

Content Security Policy is a mechanism, that helps to detect certain attacks e.g. cross-site scripting (XSS). CSP is configured through the Content-Security-Policy HTTP Header, where you specify from which domains the browser can safely download scripts. The entry in the Header is called a policy, which can consists of multiple directives separated by semicolons.

Find out more about CSP here (opens new window) We strongly encourage you to use CSP.

To make sure that the widget is loaded correctly you have to allow the browser to fetch from our domains. This can be done in different ways. We suggest you allow wildcard acces to our domains as this ist the most future proof way to enable us scale our service.

Content-Security-Policy: default-src: 'self'; connect-src: wss://*.moin.ai; https://*.moin.ai; style-src: https://*.moin.ai; font-src: https://*.moin.ai; media-src: https://*.moin.ai

Or by using the exact domains if its neccessary.

Content-Security-Policy: default-src: 'self'; connect-src: https://widget.moin.ai https://api.moin.ai https://cfg.moin.ai wss://bot.moin.ai; style-src: https://widget.moin.ai; font-src: https://widget.moin.ai; media-src: https://media.moin.ai

# iframe

You have the option to embed the widget into an iframe. This is useful if you want to embed the widget into an existing content flow or elements other than the default embeddable button / widget mechanic. The following code shows the code that is needed within the html page that will be later the src of the iframe element.

iframe.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo iframe for widget embedd</title>
</head>
<body>
  <style>
    html, body{
      margin: 0;
      padding: 0;
    }
  </style>
  <script id="moinloader" data-force-fullscreen data-force-open data-force-noclosebutton src="/moin-loader.js?id=[YOURID]"></script>
</body>
</html>

There are currently 3 special data attributes that can be used to control the behavior of the widget.

data-force-fullscreen - Forces the widget to be displayed in fullscreen mode and the the full iframe size all the time.

data-force-open - Forces the widget to be open.

data-force-noclosebutton - Forces the widget to be displayed without a close button. The following code shows an example of how to embed the widget into your website.

<div class="outerframe">
  <h2>Some outside content</h2>
  <iframe src="/iframe.html" frameborder="0"></iframe>
</div>

WARNING

Please note that API methods will no be available if the widget is embedded into an iframe. It will only be available within the iframe.html page and not on the top most context.

Introduction →

# Widget Integration

# Content Security Policy (CSP)

# iframe