{"id":6281,"date":"2026-04-23T15:03:48","date_gmt":"2026-04-23T13:03:48","guid":{"rendered":"https:\/\/help.ino.cx\/?post_type=ht_kb&#038;p=6281"},"modified":"2026-04-23T15:03:49","modified_gmt":"2026-04-23T13:03:49","slug":"chat-plugin-set-it-up-on-your-website","status":"publish","type":"ht_kb","link":"https:\/\/help.ino.cx\/index.php\/help-center\/chat-plugin-set-it-up-on-your-website\/","title":{"rendered":"Chat plugin \u2013 Set it up on your website"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright is-resized\"><img decoding=\"async\" src=\"https:\/\/help.ino.cx\/wp-content\/uploads\/2024\/09\/Smart-licence-needed-2.png\" alt=\"\" style=\"width:250px\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">[<em>Reading time: 6 minutes<\/em>]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The chat plugin is a widget you can embed on any website to let your visitors chat in real time with your agents. It consists of a <strong>floating button<\/strong> that appears on your pages, and a <strong>chat window<\/strong> that opens when a visitor clicks on it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article covers the installation, configuration, and features of the chat plugin. For more details on configuring chat modules in the Maker, see <a href=\"https:\/\/help.ino.cx\/index.php\/help-center\/chat-modules-how-to-use-them\/\">Chat modules \u2013 How to use them<\/a>. For managing conversations on the agent side, see the dedicated article on the chat pool.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Access to the Maker<\/li>\n\n\n\n<li>Your website&#8217;s domain must be declared in <strong>Client account settings > Security > Domain names<\/strong><\/li>\n\n\n\n<li>A Messaging-type smart routing must be configured and associated with your chat module<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Installing the plugin on your site<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"1024\" src=\"https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-764x1024.png\" alt=\"\" class=\"wp-image-6285\" srcset=\"https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-764x1024.png 764w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-224x300.png 224w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-768x1029.png 768w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-37x50.png 37w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-1146x1536.png 1146w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-45x60.png 45w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31-75x100.png 75w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.21.31.png 1194w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To install the chat plugin on your website:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Maker<\/li>\n\n\n\n<li>In the side menu, go to <strong>Entry point > Chat modules<\/strong><\/li>\n\n\n\n<li>Select the desired chat module<\/li>\n\n\n\n<li>Click the <strong>Integration code<\/strong> button<\/li>\n\n\n\n<li>Copy the generated JavaScript snippet<\/li>\n\n\n\n<li>Paste it into your website&#8217;s HTML code<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The required identifiers (domain, token, chat ID) are pre-filled in the generated code. No manual changes are needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tip: if you are unsure where to place the snippet, share it with your web developer \u2014 it should be inserted just before the closing &lt;\/body>\u00a0tag.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. The floating button<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The floating button is the element your visitors see on your website. It is positioned at the bottom right of the page and allows visitors to open the chat window.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"91\" height=\"81\" src=\"https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.05.17.png\" alt=\"\" class=\"wp-image-6283\" srcset=\"https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.05.17.png 91w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.05.17-50x45.png 50w, https:\/\/help.ino.cx\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-31-a-10.05.17-60x53.png 60w\" sizes=\"auto, (max-width: 91px) 100vw, 91px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2.1. Available styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Two button styles can be configured in the Maker:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Style<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><strong>Simple<\/strong><\/td><td>A round button with an icon. You can choose the background color and pick from four icon options (chat, comment, conversation, SMS).<\/td><\/tr><tr><td><strong>Advanced<\/strong><\/td><td>A wider banner featuring up to 3 customizable avatars, a tagline, and a button with text and icon. Avatars can be uploaded in the Maker or use the default images.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2.2. Unread message notifications<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the chat window is closed and an agent sends a message, a notification badge appears on the button showing the number of unread messages (up to 99, then &#8220;+99&#8221;).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.3. Mobile display<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">On mobile devices, the chat window automatically adapts to fill the entire screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Trigger strategies<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Trigger strategies let you control <strong>when<\/strong> the chat button appears and <strong>when<\/strong> the chat window opens automatically. They are configured in the Maker and evaluated in real time in the visitor&#8217;s browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two types of display behaviors can be configured for each strategy:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Behavior<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><strong>Displaying the chat icon<\/strong><\/td><td>The floating button appears on the visitor&#8217;s page when the strategy conditions are met.<\/td><\/tr><tr><td><strong>Opening the entire chat<\/strong><\/td><td>The chat window opens automatically when the strategy conditions are met.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If no strategy is configured, the button is displayed by default.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a complete guide on creating and configuring trigger strategies, see <a href=\"https:\/\/help.ino.cx\/index.php\/help-center\/trigger-strategies-set-them-up\/\">Trigger strategies \u2013 Set them up<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Conversation continuity<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The plugin automatically preserves the conversation state as the visitor navigates between pages on your site. If a visitor reloads the page or goes to another page on the same site, the conversation picks up where it left off.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visitors are identified for 30 days, which also allows them to access their past conversation history.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a conversation ends or a connection error occurs, the session is automatically reset.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Sending messages and files<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Visitors can send text messages from the input field in the chat window. Messages are delivered to agents in real time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The plugin also supports file attachments with the following limits:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Category<\/th><th>Accepted formats<\/th><th>Max size<\/th><\/tr><\/thead><tbody><tr><td><strong>Documents<\/strong><\/td><td>ZIP, GZIP, RAR, PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX<\/td><td>100 MB<\/td><\/tr><tr><td><strong>Images<\/strong><\/td><td>JPEG, PNG, GIF, BMP, SVG<\/td><td>16 MB<\/td><\/tr><tr><td><strong>Videos<\/strong><\/td><td>MP4, AVI, WebM, OGG<\/td><td>16 MB<\/td><\/tr><tr><td><strong>Audio<\/strong><\/td><td>MP3, WAV, OGG<\/td><td>16 MB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Up to <strong>10 files<\/strong> can be sent at once.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Conversation history<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The plugin includes a history screen accessible from the chat window. Visitors can browse their past conversations from this screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Sending the transcript by email<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If the <strong>Auto email sending<\/strong> setting is enabled on your chat module, visitors can request to receive the full conversation transcript by email. A prompt appears in the chat window with an input field for the email address.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Short link (direct access)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each chat module has an automatically generated <strong>short link<\/strong>, visible in the module settings (non-editable field). This link opens the chat in full-screen mode without embedding it on a website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is useful for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sharing a direct chat link via <strong>SMS<\/strong><\/li>\n\n\n\n<li>Embedding a chat link in an <strong>email<\/strong><\/li>\n\n\n\n<li>Providing quick access <strong>without web integration<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tip: when the short link is used in an SMS campaign, the system can automatically pass through the campaign target data.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Security<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The plugin includes several security mechanisms:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Mechanism<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><strong>Domain control<\/strong><\/td><td>Every request verifies that the origin domain is among the authorized domains for your account. This is why declaring your domain in the security settings is essential (see Prerequisites).<\/td><\/tr><tr><td><strong>Chat window isolation<\/strong><\/td><td>The chat window is fully isolated from your website, ensuring that your site and the widget do not interfere with each other, and that conversation data remains protected.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">10. Advanced integration (developers)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The section below is intended for developers looking to customize the plugin&#8217;s behavior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passing custom data<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your website can pass contextual data to the plugin during initialization. This data will be visible to agents in the agent toolbar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.ch_Chatus = new ChatusLauncher({\n  jz: \"&lt;customerToken&gt;\",\n  oi: \"&lt;chatUuid&gt;\",\n  data: {\n    firstname: \"John\",\n    lastname: \"Doe\",\n    message: \"Need help with my order\",\n    vars: &#91;\n      { key: \"orderId\", value: \"ORD-12345\" },\n      { key: \"customerType\", value: \"Premium\" }\n    ]\n  }\n});<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Parameter<\/th><th>Type<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><code>firstname<\/code><\/td><td>string<\/td><td>Visitor&#8217;s first name<\/td><\/tr><tr><td><code>lastname<\/code><\/td><td>string<\/td><td>Visitor&#8217;s last name<\/td><\/tr><tr><td><code>message<\/code><\/td><td>string<\/td><td>Contextual message displayed to agents<\/td><\/tr><tr><td><code>vars<\/code><\/td><td>array<\/td><td>Additional key\/value variables accessible by agents<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>[Reading time: 6 minutes] Overview The chat plugin is a widget you can embed on any website to let your visitors chat in real time with your agents. It consists of a floating button that appears on your pages, and a chat window that opens when a visitor clicks on&#8230;<\/p>\n","protected":false},"author":5,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[107],"ht-kb-tag":[],"class_list":["post-6281","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-configuring"],"_links":{"self":[{"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/ht-kb\/6281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/comments?post=6281"}],"version-history":[{"count":3,"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/ht-kb\/6281\/revisions"}],"predecessor-version":[{"id":6286,"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/ht-kb\/6281\/revisions\/6286"}],"wp:attachment":[{"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/media?parent=6281"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/ht-kb-category?post=6281"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/help.ino.cx\/index.php\/wp-json\/wp\/v2\/ht-kb-tag?post=6281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}