Embed Typeform PopUp Button into Site Header

Hello -

I am looking to embed a "popup" style TypeForm button into our homepage header to replace our existing "Apply" button. 

It's simple enough to add this into an existing part of a page by adding a code block, but I'm unable to add this button into the site header so that it appears in the main nav and on all pages.

This is a sample of the embed code that is provided from TypeForm that we would want to insert into the header.

<button data-tf-popup="t5YP3NYY" data-tf-opacity="100" data-tf-size="100" data-tf-iframe-props="title=The Post Application" data-tf-transitive-search-params data-tf-medium="snippet" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#CF491A;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Apply</button><script src="//embed.typeform.com/next/embed.js"></script>

@WesGavin Would it be possible to share your site URL? It can be done with custom code. 

Hello - the site URL is https://www.thepost.co - we would be replacing the orange "apply" button in the header with the popup typeform experience.

Do you have a direct link to typeform? something like this 

https://mvise.typeform.com/to/hQ8pLlIN

https://4l9b3ojvoyu.typeform.com/to/t5YP3NYY here is the direct link as requested

@Lesum @tuanphan

On 8/18/2023 at 12:27 AM, WesGavin said:

Hello - the site URL is https://www.thepost.co - we would be replacing the orange "apply" button in the header with the popup typeform experience.

I see you figured it out? Click apply it show Typeform popup now

On 8/25/2023 at 1:21 AM, WesGavin said:

Yes... ChatGPT did the trick here for me after some good prompting.

 

Can you share solution for other members?

Hey, could anyone help with the solution to this? I'd like to do something similar on my site using a popup from Cademy.com on my squarespace header button. 

18 hours ago, SaunaGuy said:

Hey, could anyone help with the solution to this? I'd like to do something similar on my site using a popup from Cademy.com on my squarespace header button. 

Can you share embed link?

<a class="cademy_book_now_btn" false data-cademy-embed-type="courses" data-cademy-educator-ref="the-somewhere-sauna" data-cademy-courses-layout="grid"  style="display: inline-block; text-decoration: none; background-color: #3D56E0; color: #ffffff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 20px; line-height: 50px; text-align: center; margin: 0; height: 50px; padding: 0px 33px; border-radius: 25px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; bottom: 30px; position: inherit; right: undefined; left: undefined;" href="https://the-somewhere-sauna.cademy.co.uk?layout=grid&utm_source=ref_link&utm_medium=checkout_embed&utm_campaign=book_btn_courses_link" target="_blank">Book Now</a>

On 12/19/2023 at 10:19 PM, SaunaGuy said:

<a class="cademy_book_now_btn" false data-cademy-embed-type="courses" data-cademy-educator-ref="the-somewhere-sauna" data-cademy-courses-layout="grid"  style="display: inline-block; text-decoration: none; background-color: #3D56E0; color: #ffffff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 20px; line-height: 50px; text-align: center; margin: 0; height: 50px; padding: 0px 33px; border-radius: 25px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; bottom: 30px; position: inherit; right: undefined; left: undefined;" href="https://the-somewhere-sauna.cademy.co.uk?layout=grid&utm_source=ref_link&utm_medium=checkout_embed&utm_campaign=book_btn_courses_link" target="_blank">Book Now</a>

Hi,

What is your site url

Hi, the site isn't live yet. I'm still building it in Squarespace. Should be publishing it soon though. Perhaps I can ask for your help once it's live? 

On 1/4/2024 at 9:30 PM, SaunaGuy said:

Hi, the site isn't live yet. I'm still building it in Squarespace. Should be publishing it soon though. Perhaps I can ask for your help once it's live? 

 

Yes. You can share at that time

Or you can follow this url to know how to share url if the site is trial/unpublished

https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

Hey. 

The site is now live. Any help you can suggest to make that top navigational button work as a popup would be great! 

https://www.thesomewheresauna.com/

On 12/19/2023 at 10:19 PM, SaunaGuy said:

<a class="cademy_book_now_btn" false data-cademy-embed-type="courses" data-cademy-educator-ref="the-somewhere-sauna" data-cademy-courses-layout="grid"  style="display: inline-block; text-decoration: none; background-color: #3D56E0; color: #ffffff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 20px; line-height: 50px; text-align: center; margin: 0; height: 50px; padding: 0px 33px; border-radius: 25px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; bottom: 30px; position: inherit; right: undefined; left: undefined;" href="https://the-somewhere-sauna.cademy.co.uk?layout=grid&utm_source=ref_link&utm_medium=checkout_embed&utm_campaign=book_btn_courses_link" target="_blank">Book Now</a>

You mean when users click Header button > Show this code features on a lightbox?

Hey! 

I don't quite know the correct terminology. But what I would like is a page that looks like this when the header button is clicked. There is an embed code provided by the booking platform Cademy. I've used it successfully in the body of the website on the 'sessions' page. I'd like the header button to behave similarly. 

I have attached an image for reference. Thanks for your help! 

On 1/25/2024 at 11:47 PM, SaunaGuy said:

Hey! 

I don't quite know the correct terminology. But what I would like is a page that looks like this when the header button is clicked. There is an embed code provided by the booking platform Cademy. I've used it successfully in the body of the website on the 'sessions' page. I'd like the header button to behave similarly. 

I have attached an image for reference. Thanks for your help! 

 

 

Can you provide all code you added to make it appear in body? I will try testing on my site first