Answered

Squarespace Embed — Getting the button design right

  • 18 July 2023
  • 4 replies
  • 195 views

Userlevel 2

I’ve managed to embed as per instructions but the button design is way off the button design of the main site.

Is there a way to embed the form as a pop-up but do so with a button in keeping with the site design?

icon

Best answer by mathio 21 July 2023, 09:47

View original

4 replies

Userlevel 7
Badge +5

Hi @strawberry Happy Wednesday! Have you tried embedding the form using our popup embed? Our popup embed should allow you to adjust the button design as you’d like. 

Do you mind sharing a screenshot of what the button looks like on your website? 

Userlevel 2

Hi!

Have tried the embed but the design/font/etc simply don’t match - and never will sadly due to the limitations…

Ideally, I’d like to add the button to the site as I would normally and hook it into the firing the Typeform *somehow*?

Userlevel 7
Badge +5

Hi @strawberry I believe you would need custom code to do this, but @mathio can confirm!

Userlevel 7
Badge +5

Hello @strawberry 

yes, you can attach the popup functionality to any button on your website if you dont mind getting your hand dirty with some HTML 😃

You can skip the embed snippet from share page and use Typeform Embed SDK directly:

  1. add SDK script to your page (anywhere, eg. at the very end):
    <script src="//embed.typeform.com/next/embed.js"></script>
  2. attach the typeform popup functionality to your button by adding data-tf-popup="<form-id>" attribute to your button
  3. you can configure and fine-tune the popup by using one of the many options available in the SDK (eg. data-tf-size="75" to make it smaller)

You final HTML code should look something like this:

<button
class="my-fabulous-button"
data-tf-popup="<form-id>"
data-tf-size="75"
>click me</button>
<script src="//embed.typeform.com/next/embed.js"></script>

 

Reply