Skip to main content

Integration Guide

Integrating Minnit on your website couldn't be any easier.

This guide will show you how to embed your chat onto your website.

Creating a chat​

If you don't have a chat yet, you'll want to create one here.

Embedding your chat​

Once your chat has been created, go to your chat and click on the blue "Embed Your Chat" button above the chat.

Embed Your Chat Button Example

You'll now see a page with a list of options to embed your chat:

  • HTML Code
  • Shareable Link
  • WordPress Plugin
  • Wix

Embedding via HTML Code​

Embedding your chat via the HTML code couldn't be any easier.

On the embed chat page, select HTML code and copy the generated embed code onto your website.

You also have several options on this page to customize the embed code:

  • Width/Height
  • Dynamic or Fixed width
  • Language
  • Channel (force users to join a specific channel when joining the chat)
  • Mobile/Web version
  • Theme

Embedding via the WordPress plugin​

If you haven't already installed our plugin, please install it here.

Once installed, go to your WordPress Dashboard and click on Settings, and then select Minnit Chat.

Here you can enter the link to your chatroom to embed your chat on all pages.

You can also use the block element in pages/posts by typing / and click on Minnit Chat, and enter your chatroom link to embed the chat on pages/posts.

If you aren't using the gutenberg editor, you can use this embed code instead:

<minnit-chat data-chatname="add your chatroom link here" class="wp-block-minnit-chat-chat-embed"></minnit-chat>

Add a floating icon to your website​

We have developed a script to easily get set up with adding a floating icon to your site. Use the following snippet:

<script src="https://minnit.chat/js/chaticon.js" defer></script>
<minnit-chat-icon
data-icon-pixel-size="80"
data-chat-small-medium-or-large="small"
data-circle-or-square="circle"
data-left-or-right="right"
data-chaturl="https://minnit.chat/Main"
data-hex-color-code='ff0000'
style="display:block">
</minnit-chat-icon>

Attributes in the snippet can be modified as desired:

  • data-icon-pixel-size — This determines how many pixels the chatroom icon is. 80 pixels is large enough to see and reliably tap, without getting in the way; if you want it smaller, decrease the number, larger, increase.

  • data-left-or-right — This determines whether the icon and chat appear on the bottom left, or bottom right, of your website.

  • data-chaturl — Your chat URL, such as minnit.chat/Main or organizations.minnit.chat/12345/Example

  • data-hex-color-code — Any hex color code. ff0000 is red. You can use 000000 for black, ffffff for white, 888888 for gray, or any other code from a site like https://www.w3schools.com/html/html_colors_hex.asp

  • data-chat-small-medium-or-large — Determines how large you want the chatroom to be when it's opened. Accepted attributes are small medium or large.

  • data-circle-or-square — Change the shape of the chatroom icon. Accepted attributes are circle and square. Select a shape that best fits your website's look and feel.

We will add this to the standard Embed page in a future update, if there is a high enough demand.

Customization​

Automatically logging users in with their existing account details​

If you already have an existing account database, you can link it to your chat so users will be automatically logged in when they visit the chat using Single Sign On (SSO).

SSO is available for Organizations on all plans.

Click here for details on how to set up SSO.

Alternatively, you can automatically set a user's nickname using the nickname parameter in the embed code.

Example embed code using the nickname parameter:

<iframe src="https://minnit.chat/test?embed&nickname=John" style="border:none;width:90%;height:500px;" allowTransparency="true"></iframe>

With the above embed code, the user's nickname will automatically be set to John.

Nicknames passed via this parameter must be URL encoded, so if you want to add a space within the name it must be replaced with %20. For example to set the name "John Smith", you would use &nickname=John%20Smith.

Changing the language​

By default, we automatically set the language based on the user's browser/operating system settings.

If you want to set a language that will apply to all users, you can change the chat language in chat settings, or you can append &language=lang_code to the embed URL.

e.g. <iframe src="https://minnit.chat/Demo?embed&language=fr" style="border:none;width:90%;height:500px;" allowTransparency="true"></iframe> would set the language to French.

You can find a list of languages and their respective language codes when generating the HTML embed code -- simply select a different language from the dropdown setting on that page.

Change Language Example

If you're using the WordPress plugin and using the manual embed code provided above, you can also change the language there using the same parameters, e.g.:

<minnit-chat data-chatname="https://minnit.chat/Demo?&language=fr" class="wp-block-minnit-chat-chat-embed"></minnit-chat>

On the Pro plan and higher, you also have access to the Custom Texts feature which allows you to change every text that shows in the chat.

To use Custom Texts, go to your chat settings and click on Language & Text Strings under Chat Settings.

Enable the Custom Texts feature by hitting the toggle button, and change the texts as needed. Blank fields will keep the default value.

Once done, hit save changes and you should see the changes reflected in the chat.

Changing the background​

You can change the background in chat settings by clicking on "Appearance".

Here you can upload a background that will show in the chat.

Note: Uploaded pictures can never be inappropriate, offensive, shocking, or otherwise in violation of the Terms of Service.

Further Customization with CSS​

If you know CSS, you are able to directly modify it by going to Chat Settings -> Appearance.

For example, to change the textbox color, you would write:

#textbox{background-color:red !important}

You can use Inspect Element in your browser to find the IDs of other elements that you'd like to hide.

If you'd like to hide certain elements but you're not sure how, please contact us and we'd be happy to help.

Custom CSS is available for chats on the Community plan and higher.

Further customization​

You can explore the documentation for all of the different organization settings and chat settings to get your chat working exactly the way you want.