Smartify

Widget for Wix Website platform

This example shows how to integrate the Tiledesk Widget via a custom HTML code using the Wix website platform: https://manage.wix.com/

Prerequisites

Due to a security update in Wix (https://support.wix.com/en/article/updates-to-iframes-and-custom-elements), some elements in the widget installation snippet code could be blocked. We have a workaround: host the Tiledesk installation snippet on a separate public HTTPS page, then embed that page in your Wix site via an iframe.

Create an HTML page that hosts the Tiledesk Widget installation snippet. Example:

tiledesk-host-page.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <script type="application/javascript">
      window.tiledeskSettings=
      {
          projectid: "<CHANGE_IT>",
          fullscreenMode: true,
          open:true,
      };
      (function(d, s, id) {
        var w=window; var d=document; var i=function(){i.c(arguments);};
        i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;
        var js, fjs=d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js=d.createElement(s);
        js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document,'script','tiledesk-jssdk'));

      window.addEventListener('load', (event)=> {
        document.dispatchEvent(new Event('mousemove'))
      })

    </script>
</head>
</html>

Note the URL for this page (for this tutorial we'll call it: https://). You will use it in the next steps.

Installation

From your Wix website panel, follow these steps:

1

Open Site Settings

After completing the basic configuration of your site, navigate to "Settings." You can usually find this option in the top menu or sidebar.

2

Custom Code

Scroll down and click on the "Custom code" setting option in the "Developer and integrations" section.

3

Add Custom Code

Click on "+ Add custom code".

4

Insert an iframe

From the modal window that appears, place an iframe HTML element in the text box. The iframe src must point to the public HTTPS page you created earlier. Example:

Set a name, select the pages where the code should be active, and set the embedded code to "pin to screen" (so it sticks to the bottom-right corner).

5

Apply Changes

Apply the changes. The Tiledesk live chat widget on your Wix website should now work.

That's it — your Wix website is now equipped with the Tiledesk live chat widget, allowing you to engage with visitors in real time.

Credits

Many thanks to Frank Huisman from Duo Criativo agency for the collaboration on writing this tutorial.

Related

  • Previous: Widget for React with WebView — https://developer.tiledesk.com/widget/integrate-widget-for-react-with-webview

  • Next tutorials: https://developer.tiledesk.com/widget/tutorials

Privacy

This page references the Tiledesk privacy policy: https://tiledesk.com/privacy.html

PreviousPrechat Form JSON specsNextEmail parameters and templates configuration