# 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: *.moin.ai; style-src: *.moin.ai; font-src: *.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/primus; style-src: https://widget.moin.ai; font-src: https://widget.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: *