# Integration
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. You can use wildcards inside a directive e.g.
Content-Security-Policy: default-src: 'self'; img-src *
Allows the browser to fetch images from anywhere but all other requests fall back to the default-src directive, which only allows the browser to fetch files from the same domain.
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. Either by using a wildcard for the subdomains
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
Content-Security-Policy: default-src: 'self'; connect-src: https://widget.moin.ai https://api.moin.ai wss://bot.moin.ai; style-src: https://widget.moin.ai; font-src: https://widget.moin.ai; media-src: https://media.moin.ai
Or by using a global wildcard. Note: this will also allow the browser to fetch from other domains.
Content-Security-Policy: default-src: 'self'; connect-src: *; style-src: *; font-src: *
# 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.