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.