Custom Multi Function Button

How to Add a Multi-Function Button for Desktop and Mobile in Squarespace 7.1

Adding a custom button to your Squarespace website that initiates a phone call on mobile devices and redirects to a contact page or email on desktops, can really improve the user experience and help drive more conversions. This guide will walk you through the steps in a simple, easy-to-follow way.

Difficulty Level:

• Beginner: 4/10 (You'll be copying and pasting code, so just follow along carefully!)

• Intermediate: 2/10 (Pretty straightforward with just a bit of customization.)

• Expert: 1/10 (Quick and easy!)

Step 1: Add the Button to Your Page

1. Log In to Your Squarespace Account:

   • Head over to your Squarespace dashboard and log in.

2. Navigate to the Desired Page:

   • Find the page where you want to add the button.

3. Enter Edit Mode:

   • Click on “Edit” to make changes to the page content.

4. Add a Button Block:

   • Click the “+” icon to add a new block.

   • Choose “Button” from the options.

   • Set the button text (e.g., “Contact Us”) and add the link to your contact page URL e.g., https://www.website.ie/contact or an email address.

   • Click “Apply” to save the button.

Step 2: Identify the Button's Block ID

1. Preview the Page:

   • Save your changes and preview the page.

2. Inspect the Button Element:

   • Right-click on the button and select “Inspect” to open the browser's developer tools.

3. Locate the Block ID:

   • In the developer tools, find the button's parent <div> with a unique id attribute, such as id="block-id-XXXX".

   • Make a note of this unique block ID.

Step 3: Add Custom JavaScript to Modify Button Behavior

Before moving forward, make sure to replace +YOUR_PHONE_NUMBER in the code below with your own phone number. Similar to this +35312345678!

1. Access Code Injection Settings:

   • In your Squarespace dashboard, go to Pages > Website Tools > Code Injection.

2. Insert JavaScript into the Footer:

   • In the Footer section, paste the following JavaScript code, replacing #block-id-XXXX with your button's actual block ID:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.querySelector('#block-id-XXXX a');
    if (button) {
      if (/Mobi|Android/i.test(navigator.userAgent)) {
        buttonBlock.href = 'tel:+YOUR_PHONE_NUMBER';
       buttonBlock.onclick = function () {
          window.location.href = 'tel:+YOUR_PHONE_NUMBER';
          return false;
        };
      } else {
        buttonBlock.href = 'https://www.website.ie/contact';
      }
    }
  });
</script>

Copy Code

Save your changes to apply the effect to all images on your site.

Step 4: Test the Button Functionality

1. On a Desktop Device:

   • Visit the page and click the button to ensure it redirects to the contact page.

2. On a Mobile Device:

   • Access the page on your phone and tap the button to confirm it initiates a phone call to YOUR_PHONE_NUMBER.

Need Help?

If you run into any issues or have questions, feel free to reach out to us at letstalk@usual.ie or click below to see the multi-function button in action!

By following these steps, you can easily add a button to your Squarespace website that provides a great experience for both mobile and desktop users.