Create a button that opens Authenti widget

This guide explains how to create a custom button that opens a chat widget on your Squarespace or WordPress site without navigating away from the page. Ex: “chat with us”


Step 1: Add the Button’s HTML

First, you need to add the button code to your page. Instead of using a standard button block, you’ll use a Code Block (in Squarespace) or a Custom HTML Block (in WordPress) to ensure the button has the correct ID and styling.

Copy and paste the following HTML code into your page’s code block:

HTML

  <a id="OpenChatButton" style="border: 2px solid #bd7aff; border-radius: 5px; color: #bd7aff; padding: 12px 12px; text-decoration: none; display: inline-block;" href="#">
    <span class="stk-button__inner-text">embed with a script</span>
  </a>
  • id="OpenChatButton" is a unique identifier that the script will look for.
  • style="..." applies the border, color, and padding directly to the button.
  • href="#" prevents the page from navigating away when the button is clicked.

Step 2: Add the JavaScript

Next, you’ll add the script that makes the button functional. This script listens for a click on the button and then opens the chat widget. It also includes event.preventDefault() to stop the page from jumping to the top.

Place this script in a separate Code Block on the same page, or for a cleaner solution, add it to your site’s Page Header Code Injection area.

JavaScript

<script>
  // Wait for the page to fully load to ensure the button exists
  window.addEventListener('load', function() {
    var helpButton = document.getElementById('OpenChatButton');
    if (helpButton) {
      helpButton.addEventListener('click', function(event) {
        // Prevents the page from jumping to the top
        event.preventDefault();
        // Check if the chat widget's API is available
        if (window.AuthentiChat && typeof window.AuthentiChat.open === 'function') {
          window.AuthentiChat.open();
        }
      });
    }
  });
</script>

After adding both the HTML and the JavaScript, save your changes. Your new custom button should now open the chat widget smoothly when clicked.