Answered

Change embed based on language

  • 17 December 2021
  • 10 replies
  • 541 views
H

Dear Community,

I have a website in English and German and a Typeform embed. I need to open a different Typeform ID depending on the language. I successfully embedded a Typeform on our website, but I’m having issues opening the correct popup based on the language. I can see on a browser console that I’m successfully getting the Typeform ID depending on the language of the website, but I’m not able to set this attribute to the Typeform embed.

Here is the script I have on the website:

<!-- Select Typeform form based on the language. START -->
  <script src="//cdn.weglot.com/weglot.min.js"></script>
  <script>
    Weglot.on("switchersReady", function(initialLanguage) {
  		console.log("the switchers are ready, I can tweak them")
      let listTypeformData = {
    	'en': 'guhcBFUy',
    	'de': 'IzwdgMwJ'
      };
      var currentLanguage = Weglot.getCurrentLang();
      let typeformData = listTypeformData[currentLanguage];
      console.log(typeformData);
      var a = document.getElementById("tf-B2B-EN-1");
      a.setAttribute("data-tf-popup", typeformData);
		})
  </script>
  <!-- Select Typeform form based on the language. END -->

And here is the embed script:

<button

id="tf-B2B-EN-1"
data-tf-popup="guhcBFUy"
data-tf-iframe-props="title=Join our community of hand-picked creators."

style="
all:unset;
font-family: Sahar,Helvetica,Arial,sans-serif;
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;

background-color: #E53C4E;
color: #FFFFFF;
font-size: 16px;
line-height: 16px;
font-weight: 600;
text-align: center;
text-decoration:none;

border-radius: 6px;
padding-right: 50px;
padding-left: 50px;
padding-top: 17px;
padding-bottom: 15px;
border: 1px solid #E53C4E;
margin-top: 10px;

">Join Now</button>

<script src="//embed.typeform.com/next/embed.js"></script>

What I’m trying is to set the attribute data-tf-popup when the language changes.

I’ve been trying to solve this for a couple of days now, unsuccessfully sadly.

Any help will be very appreciated!

Thanks!

icon

Best answer by mathio 20 December 2021, 12:50

View original

10 replies

Liz
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.
H

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

mathio
Rank
Userlevel 7
Badge +5

Hello @herberthellemann 

you will need to embed using our embed SDK like this.

  1. you only need a button with ID, we will attach functionality via custom JavaScript later
<button id="tf-B2B-EN-1">Join Now</button>
  1. then link to typeform embed SDK JS and CSS for popup
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
  1. finally attach the functionality - determine which typeform to open when the button is clicked
<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>

Hope this helps.

H

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 🎄

Liz
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.
A

Hello @herberthellemann 

you will need to embed using our embed SDK like this.

  1. you only need a button with ID, we will attach functionality via custom JavaScript later
<button id="tf-B2B-EN-1">Join Now</button>
  1. then link to typeform embed SDK JS and CSS for popup
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
  1. finally attach the functionality - determine which typeform to open when the button is clicked
<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>

Hope this helps.

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.

mathio
Rank
Userlevel 7
Badge +5

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.

A

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="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>

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.



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

Larisabrownb

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.

Liz
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs