#599: How to configure web-widget

The necessary conditions

• The server with Swarmica must be accessible from outside by domain name and protocol HTTPS

Widget Creation

In order to distinguish between web applications (sites) where the widget is embedded and to be able to make different settings for different applications, you should create separate "Widget" type channels in Swarmica.
To create a Widget channel, go to Settings > Channels > Widgets.

Click Create and enter a name, for example, "Widget on the main site" — this name will be displayed in the lists of requests, data exports, etc.

Choose the type of authorization:

• Anonymous — will not require any authorization.
• OTP code — is used if you integrate the widget into your application and want to pass authorization from it.
• Email — allows only those users who are registered on Swarmica.

Switch the toggle to Enable and click Save.

Now the widget is ready for embedding.

Widget embedding

To embed the widget into the application, add the code displayed in the right panel into the HTML code of the site or application where you want to embed the widget. In order to optimize the application loading speed, place the code closer to the closing tag. </body>

Example of embedding code:

<!-- start embedded Swarmica Chat script -->
<iframe src="https://tool.swarmica.com/widgets/index.html?id=tHf5NcVly6D7ztm-" id="tHf5NcVly6D7ztm-" style="position: fixed; right: 12px; bottom: 12px; width: 56px; height: 56px; overflow: hidden; "
  allowTransparency="true"
  frameborder="0"
  allowTransparency="true" frameborder="0"></iframe>
<script src="https://tool.swarmica.com/widgets/render.js"></script>
<script>
  const iframe = document.getElementById("tHf5NcVly6D7ztm-")
  iframe.onload = () => {
    renderWidget("tHf5NcVly6D7ztm-")
  }
</script>
<!-- end embedded Swarmica Chat scripts -->

Also, you can specify the localization parameter of the widget, for this you need to pass the parameter. locale=ru or locale=en:

<iframe src="https://tool.swarmica.com/widgets/index.html?id=tHf5NcVly6D7ztm-&locale=ru" ...