Change embed based on language

Hi @herberthellemann Happy Monday! Since you would need to create custom code for this, @mathio or @picsoung may have some advice to help you. 

Thanks for your reply @Liz! I’m not a programmer and I’m struggling to solve this. For the moment I implemented a work-around, but it’s not a scalable long-term solution.

Hopefully @mathio and @picsoung have some advice :)

Have a great Monday as well

Dear @mathio,

Sorry for the late reply. I was traveling yesterday.

I just took a look at your suggestion and implemented it. It works perfectly, thank you very much!

This will really help us when adding more languages to our website.

Enjoy the holidays 🎄

Yay!! Glad to hear that worked, @herberthellemann ! Let us know if you have any other questions, and have a great holiday! 

<button id="tf-B2B-EN-1">Join Now</button>

<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  const listTypeformData = {
    'en': 'guhcBFUy',
    'de': 'IzwdgMwJ'
  };
  const button = document.getElementById("tf-B2B-EN-1");
  button.onclick = () => {
    const currentLanguage = Weglot.getCurrentLang();
    const typeformId = listTypeformData[currentLanguage];
    window.tf.createPopup(typeformId).open();
  }
</script>

Hi @mathio I found your solution for different languages of Typeform based on user’s location. It works perfectly as a pop-up but I can’t set it to work as a slider, I’ve tried everything.

This is the pop-up code that works perfectly:

 

<button id="tf-B2B-EN-1"  data-tf-position="right" data-tf-opacity="100" data-tf-iframe-props="title=Create an account 📲 [Website form] (copy)" 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:#0445AF;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;">Join Now</button>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="https://embed.typeform.com/embed.js"></script>

<script>
  const listTypeformData = {
      'en': 'DajI5EGZ',
    'no': 'yO3jDt1y',
    'da': 'IPuLZryb',
    'sv': 'uofnc5lP',
    'it': 'TU7wpUrf'
  };
  const button = document.getElementById("tf-B2B-EN-1");
  button.onclick = () => {
    const currentLanguage = Weglot.getCurrentLang();
    const typeformId = listTypeformData[currentLanguage];
    window.tf.createPopup(typeformId).open();
  }
</script>

Initially, it had data-tf-popup=”DajI5EGZ” attribute and it was showing only English version, and when I removed it it worked fine and changed the languages based on the language set. But, when I remove data-tf-slider from it, the button won’t work at all. Please help, thanks.

Hello @ado202 

in your code example you are mixing the HTML embed code with the JS code from my example. Those two should not mix as it might cause a conflict of the two (and thus unexpected behavior).

I’d suggest to update the code to use the JS API like this:

<button id="my-typeform-slider-button">Join Now</button>

<link rel="stylesheet" href="//embed.typeform.com/next/css/slider.css" />
<style>
  #my-typeform-button {
    all:unset;
    font-family:Helvetica,Arial,sans-serif;
    display:inline-block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background-color:#0445AF;
    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;
  }
</style>

<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  const listTypeformData = {
    'en': 'DajI5EGZ',
    'no': 'yO3jDt1y',
    'da': 'IPuLZryb',
    'sv': 'uofnc5lP',
    'it': 'TU7wpUrf'
  };
  const button = document.getElementById("my-typeform-slider-button");
  button.onclick = () => {
    const currentLanguage = Weglot.getCurrentLang();
    const typeformId = listTypeformData[currentLanguage];
    window.tf.createSlider(typeformId, {
      position: 'right',
      opacity: 100,
      iframeProps: {
        title: 'Create an account 📲 [Website form] (copy)'
      },
      transitiveSearchParams: true,

    }).open();
  }
</script>

Note that I removed most of the code from the button itself and moved it into the createSlider method (instead of the createPopup). If you want to modify settings of your embedded typeform please refer to the documentation.

I also included the slider.css file instead of popup.css to make sure the slider is displayed correctly.

Also note that you need to load the latest version of embed SDK from the embed.typeform.com/next/embed.js URL.

<button id="my-typeform-slider-button">Join Now</button>

<link rel="stylesheet" href="//embed.typeform.com/next/css/slider.css" />
<style>
  #my-typeform-button {
    all:unset;
    font-family:Helvetica,Arial,sans-serif;
    display:inline-block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background-color:#0445AF;
    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;
  }
</style>

<script src="https://embed.typeform.com/embed.js"></script>
<script>
  const listTypeformData = {
    'en': 'DajI5EGZ',
    'no': 'yO3jDt1y',
    'da': 'IPuLZryb',
    'sv': 'uofnc5lP',
    'it': 'TU7wpUrf'
  };
  const button = document.getElementById("my-typeform-slider-button");
  button.onclick = () => {
    const currentLanguage = Weglot.getCurrentLang();
    const typeformId = listTypeformData[currentLanguage];
    window.tf.createSlider(typeformId, {
      position: 'right',
      opacity: 100,
      iframeProps: {
        title: 'Create an account 📲 [Website form] (copy)'
      },
      transitiveSearchParams: true,

    }).open();
  }
</script>

Works like a charm! Thank you @mathio , much appreciated!​​​

I have a website in English and German and a Typeform embed. I need to open a different Typeform ID depending on the language.This will set the player's tooltips and default caption track from English to your desired language, depending on   love language test    the availability. The plugin automates this as ...Does anyone know if it's possible to change the language of the Youtube embed player. For example, to change things like "Full Screen", ...I want to embed a different video in a page based on what language is chosen. I have tried putting the following code in as a shortcode to the site but it ...Projects, surveys, meeting registration and more can be embedded in a specific language. ... Changing the dropdown will automatically update the embed code.

Hi @Larisabrownb Thanks for stopping by! I didn’t see a typeform on your website. Do you mind sharing where you have it located?