Specific URL opens slider typeform on page | Community
Skip to main content
Answered

Specific URL opens slider typeform on page

  • February 8, 2022
  • 3 replies
  • 103 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

Best answer by mathio-tf

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>

 

View original

3 replies

mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • February 8, 2022

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>

 


  • Author
  • Explorer
  • 2 replies
  • February 9, 2022

wow, thanks Mathio  ! ;)

I’ll implement later today and let you know !

 

 


Gabi Amaral
Ex–Typefomer
Forum|alt.badge.img+5
  • Ex–Typefomer
  • 1778 replies
  • February 9, 2022

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