Answered

Specific URL opens slider typeform on page

  • 8 February 2022
  • 3 replies
  • 90 views

Hi, 

We have a product page with 2 typeform buttons that open sliders : 

 

Get full details slider typeform

&

Order now slider typeform

 

When people click on “get full details” they access a slider typeform and get an email with a call to action : order now email button

 

This order now email button leads to the product page.

I’d like that a specific url links to the product page but opens automatically the order now slider on that specific case

 

anyone has ideas how to achieve this with Typeform ? 

 

with custom code ? 

 

Many thanks in advance for your ideas and suggestions !  😄

 

Regards

 

Antoine

icon

Best answer by mathio 8 February 2022, 11:56

View original

3 replies

Userlevel 7
Badge +5

Hello @Ant777 

if you want to open your embedded typeform automatically, you can achieve this via Advanced Embed Options (Custom Launch Options → On Page Load). Alternatively the embed SDK has Custom Launch Options feature as well.

However if you want to open this only for specific URLs, you will need to implement this yourself via custom JavaScript code. Something like this:

<!-- button to open the slider manually -->
<button id="slider-link">open slider</button>

<!-- include embed lib JS and CSS -->
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/slider.css" />

<!-- custom logic below -->
<script>
// create typeform slider embed
const mySlider = window.tf.createSlider('oWPUHPmF')

// attach 'open' function to button click to open the slider manually
document.querySelector('#slider-link').onclick = mySlider.open

// check URL query parameters if the slider should open automatically on page load
const autoOpenSlider = window.location.search.includes('auto-open-slider-true')
if (autoOpenSlider) {
mySlider.open() // open automatically
}
</script>

 

wow, thanks Mathio  ! ;)

I’ll implement later today and let you know !

 

 

Userlevel 7
Badge +5

Don't forget to send us the link to your product page, @Ant777! We're always very interested to check new use cases! :wink:

Reply