How to Dynamically Change Paperform Embed Code Based on Weglot Language Switch?

Hello,

I am using Webflow to build a multilingual website, and I have integrated Weglot for language translation. I have a popup on my website that contains a Paperform embed code. The embed code needs to change based on the language selected by the user. Specifically, I need to switch between two different Paperform IDs when the language changes between English and Traditional Chinese.

Here are the embed codes for both languages:

English Embed Code:

<div id="paperform-embed">
  <div data-paperform-id="lalachat-whatsapp-marketing"></div>
  <script>
    (function() {
      var script = document.createElement('script');
      script.src = "https://paperform.co/__embed.min.js";
      document.body.appendChild(script);
    })();
  </script>
</div>

Traditional Chinese Embed Code:

<div id="paperform-embed">
  <div data-paperform-id="lalachat-bookdemo"></div>
  <script>
    (function() {
      var script = document.createElement('script');
      script.src = "https://paperform.co/__embed.min.js";
      document.body.appendChild(script);
    })();
  </script>
</div>

I have embed this code in my setting before to detect the current language and update the embed code accordingly. Here is the script I have tried to use:

<div id="paperform-embed"></div>

<script>
  function loadPaperform(formId) {
    var embedContainer = document.getElementById('paperform-embed');
    embedContainer.innerHTML = '<div data-paperform-id="' + formId + '"></div><script>(function() {var script = document.createElement("script"); script.src = "https://paperform.co/__embed.min.js"; document.body.appendChild(script); })()<\/script>';
  }

  function updatePaperformEmbed() {
    var currentLang = Weglot.getCurrentLang();
    if (currentLang === 'en') {
      loadPaperform('lalachat-whatsapp-marketing');
    } else if (currentLang === 'tw') {  
      loadPaperform('lalachat-bookdemo');
    }
  }

  function initializePaperformEmbed() {
    if (typeof Weglot !== 'undefined' && Weglot.getCurrentLang) {
      updatePaperformEmbed();
      document.addEventListener('weglotLangChanged', updatePaperformEmbed);
    } else {
      setTimeout(initializePaperformEmbed, 100);  // Retry initialization after 100ms
    }
  }

  document.addEventListener('DOMContentLoaded', initializePaperformEmbed);
</script>

Despite my efforts, the embed code doesn’t switch as expected when the language changes. It always shows the English version.

Details:

  • Platform: Webflow
  • Multilingual Plugin: Weglot
  • Purpose: Dynamically change Paperform embed based on selected language (English to Traditional Chinese)
  • Current Behavior: Only English embed code is displayed regardless of language switch
  • Expected Behavior: Embed code should change to “lalachat-bookdemo” when Traditional Chinese is selected

Could anyone provide guidance on how to properly implement this dynamic switching of embed codes? Any help or pointers would be greatly appreciated.

Thank you!


Here is my site Read-Only link: Webflow - Lalachat

Link to change language : Lalachat Home

I recall there is a way to do this, you’d find it in Weglot docs as it’s not a Webflow product.

Hello! Weglot team here. I see you’re having an issue with your Paperform embed code.

Weglot can change the Paperform ID using a custom definition. The correct Paperform will then display on your website based on the chosen language.

However, these custom definitions must be implemented inside Weglot’s back office. To better assist you, could you please contact us at support@weglot.com with the information in this post? We’ll then be able to help you implement these custom definitions.

Thank you, and we’re waiting for your email!