To add a button to a Hotspot Dot, you want to add the following HTML into the <DotDescription>

<a href="https://will-myers.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-sqsp-button="" data-initialized="true">
  Learn more
</a>

You can adjust:

  • “Learn more” as the button text

  • Change the href value to be a different link

  • Change .sqs-button-element--primary to end in secondary or tertiary to change the button style.

 

All together, a <Dot> could look like this:

  <Dot x="17.4%" y="71.9%">
    <DotTitle>3</DotTitle>
    <DotDescription>
      <img src="https://static1.squarespace.com/static/684a13e98d165752588c57a8/t/6875cc71f78a5367f95ffb6f/1752550514538/sporlab-XiZ7pRvCzro-unsplash.jpg" />
      <p>
        Write your own custom HTML to put whatever you want in the tooltip, including <code>&lt;img></code> and <code>&lt;button></code>'s
      
      </p>
      <a href="https://will-myers.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-sqsp-button="" data-initialized="true">
        Learn more
      </a>
    </DotDescription>
  </Dot>
Previous

Add a hotspot to a Product Image
Next

Can I Self Host This Plugin?