Typeform Slider Custom Button Code Check | Community
Skip to main content
Answered

Typeform Slider Custom Button Code Check

H

Not getting much help from support so wanted to see if someone could help with this code to make sure it is correct?

 

<!-- TypeForm -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/slider.css" />
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const typeformSlider = window.tf.createSlider('C0hfkv');
    const buttonClasses = [
      '.btn.btn--border.theme-btn--primary-inverse.sqs-button-element--primary',
      '.theme-btn--primary.btn.sqs-button-element--primary',
    ];
 
    buttonClasses.forEach((buttonClass) => {
      const button = document.querySelector(buttonClass);

      if (button) {
        button.addEventListener('click', function (event) {
          event.preventDefault();
          event.stopImmediatePropagation();
          typeformSlider.toggle();
        });
      }
    });
  });
</script>

Best answer by mathio-tf

Hi,

I think you might be mixing 2 approaches here. You either use HTML snippet (with data-tf-* attributes) to configure your embed or you use JavaScript API. In the code above you are using JavaScript API, therefore do not add any data-tf-* attributes. Instead place them into the configuration object when using the createSlider method.

In your case, if you want to read all parameters from the URL and pass them to your typeform:

const typeformSlider = window.tf.createSlider('C0hfkv', {
  transitiveSearchParams: true,
});

If you want to read only some URL parameters you can list them as an array:

const typeformSlider = window.tf.createSlider('C0hfkv', {
  transitiveSearchParams: [
    'utm_source',
    'utm_medium',
  ],
});

 

The hidden attribute is relevant only if you want to pass a specific value to your typeform (other than from URL of the host page), eg:

const utmMedium = '...' // TODO: logic to retrieve the value

const typeformSlider = window.tf.createSlider('C0hfkv', {
  hidden: {
    utm_source: 'my_value',
    utm_medium: utmMedium,
  },
});

 

View original

    4 replies

    Liz
    Community Team
    Forum|alt.badge.img+5
    • Liz
    • Tech Community Advocate
    • 14960 replies
    • August 2, 2023

    Hi @HereComesBob Thanks for stopping by! Can you explain a bit more about what you’re looking to do with the code? 

    One thing to note is that our support team won’t be able to help with any custom code, though there may be someone in the community here that can. (tagging @mathio too!)

    Life is a series of awkward moments separated by snacks.
    mathio-tf
    Typeform
    Forum|alt.badge.img+5
    • mathio-tf
    • Typeform
    • 888 replies
    • August 2, 2023

    Hello @HereComesBob 

    I tested your JavaScript code and it works fine. Just make sure you have buttons that are selectable with selectors from buttonClasses variable in your website at the time the code is executed (on page load).

    Liz
    Grace
    2 people like this
    • Liz
      Liz
    • Grace
      Grace
    H

    Hi All -

    Apologies as I should’ve been more specific with my post. While the code does work, it doesn’t pass through the dynamic utm parameters. I was told to add <div data-tf-widget="C0hfkv" from support but that makes the form appear when loaded below the footer.

    @Liz I will say that they did try and help with the custom coding as above but not getting anywhere as I’m being passed around to different people that are saying different things. Looking at the documentation it seems I need to add:

    data-tf-transitive-search-params="utm_source, utm_medium"
    data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx"

    I have the utm tracking activated on the form itself on the platform. @mathio if you have any insight I would really appreciate it as I’ve spent hours trying to make this work.

    mathio-tf
    Typeform
    Forum|alt.badge.img+5
    • mathio-tf
    • Typeform
    • 888 replies
    • Answer
    • August 3, 2023

    Hi,

    I think you might be mixing 2 approaches here. You either use HTML snippet (with data-tf-* attributes) to configure your embed or you use JavaScript API. In the code above you are using JavaScript API, therefore do not add any data-tf-* attributes. Instead place them into the configuration object when using the createSlider method.

    In your case, if you want to read all parameters from the URL and pass them to your typeform:

    const typeformSlider = window.tf.createSlider('C0hfkv', {
  transitiveSearchParams: true,
});

    If you want to read only some URL parameters you can list them as an array:

    const typeformSlider = window.tf.createSlider('C0hfkv', {
  transitiveSearchParams: [
    'utm_source',
    'utm_medium',
  ],
});

     

    The hidden attribute is relevant only if you want to pass a specific value to your typeform (other than from URL of the host page), eg:

    const utmMedium = '...' // TODO: logic to retrieve the value

const typeformSlider = window.tf.createSlider('C0hfkv', {
  hidden: {
    utm_source: 'my_value',
    utm_medium: utmMedium,
  },
});

     

    Liz
    1 person likes this
    • Liz
      Liz

    Reply


    Still need help?

    Don't be shy and ask the community.

    Ask your question here!
    Community T&Cs