Developer docs

Overview

Keychatly adds a chat bubble to the corner of your website. The install code loads a small script, which shows the bubble and opens the chat window inside a frame, so your website's styles can't change how the chat looks and the chat can't change your website.

Once the script has loaded, it adds one object to the page, window.Keychatly, with three commands for opening and closing the chat.

Install code

Copy your code from Install widget in the dashboard. It looks like this:

<script src="https://YOUR-APP-DOMAIN/widget.js" data-widget="WIDGET_ID" async></script>

src

The address of the script, on your Keychatly domain. Copy it as it is.

data-widget

The ID of one of your websites in Keychatly. Each website has its own ID, look and settings, and its chats are labelled with that website in the inbox.

async

Lets your page keep loading while the script downloads, so the chat doesn't slow it down.

Paste the code just before the closing </body> tag, ideally in a template every page uses. Step-by-step guides for WordPress, Shopify and Wix are in the help center.

To stop other websites from using your code, add your addresses under Customize widget → Allowed websites. The chat then only loads on those websites and their subdomains.

Widget commands

Keychatly.open()

Opens the chat window.

Keychatly.close()

Closes the chat window. The bubble stays.

Keychatly.toggle()

Opens the chat if it's closed, and closes it if it's open.

The commands take no settings and return nothing.

Examples

A “Contact us” button

<button type="button" onclick="Keychatly.open()">
  Contact us
</button>

A text link that opens and closes the chat

<a href="#" onclick="Keychatly.toggle(); return false;">
  Chat with us
</a>

Only call it once the chat has loaded

The install code uses async, so for a moment after a page opens Keychatly may not exist yet. Checking first avoids an error:

<script>
  function openChat() {
    // The install code may still be loading if the page has only just opened.
    if (window.Keychatly) {
      Keychatly.open();
    }
  }
</script>

<button type="button" onclick="openChat()">Questions? Ask us</button>

Closing the chat from your own code

<script>
  // For example, close the chat when the visitor sends your checkout form
  document.getElementById("checkout-form")
    .addEventListener("submit", function () {
      if (window.Keychatly) Keychatly.close();
    });
</script>

Good to know

• Use one install code per page. If it's pasted twice, only the first one runs.
• When “Hide the chat on phones” is on, the chat stays hidden on screens up to 480 pixels wide, also when you call Keychatly.open().
• “Load the chat after the website finishes loading” is on by default. The bubble then appears once your page has loaded.
• The chat remembers whether it was open while the visitor moves between pages in the same browser tab.