Pass website variables through embedded typeform

Hi @KajabiChrystle Happy Monday! If you haven’t already seen it, I would first reference this article which will walk you through how to pass information not only into a typeform, but through an embedded one. 

If you need further help, @mathio or @picsoung may be able to offer some guidance. 

Thanks for the response @Liz. I had done this already, however the typeform is not accepting the name we have given the contact ID on our end to pass the value through. It just shows up as contactID in the responses.
@mathio, @picsoung, tagging you in for some additional troubleshooting here please?

The other company I work with gives us an embed code for their videos, as well as a script that is placed on all site pages to allow them the grab the variables from our backend database and pass them through to the typeform response.

Hi @KajabiChrystle Hm, shoot. Once @mathio is back in office (he’s out this week), hopefully he’ll have some suggestions for you!

Hi @mathio hoping to get your eyes on this thread. Let me know if you need more information from me 

Hello @KajabiChrystle 

if I understand your code correctly you are manually updating the src attribute of the iframe that contains your typeform, right?

I’d suggest to use the hidden fields feature of our embed SDK - see related developer docs. You can pass hidden fields via an object:

window.tf.createWidget("<form-id>", {
  container: document.getElementById("wrapper"),
  hidden: {
    custom_id: "xxxxxxxx"
  },
})

Also do not forget to add this “custom_id” hidden field to your typeform - see docs about hidden fields in general. Otherwise this will not work.

Thanks @mathio, does this snippet above work in conjunction with the embed code? I’m new to coding so want to make sure we’re on the same page.
 

Let me lay out what we currently do w/ our typeforms, and what I want to achieve.

current state: 

1. typeform code is embedded on a page that only logged in members can access. They have the option to complete this typeform after they have finished a course.
2. we manually configure the code to pass the name of the course into the typeform (course_name = xxxxx)

future state:

1. Keep both steps above
2. Additionally, pass the {{contactId}} of the logged in member from the page code through to an new hidden field on the embedded typeform (contact_id = {{contactId}}  

See image of what the script looks like for a logged in member on our site

With this in mind, are you saying that I add the snippet above to the typeform embed code? 

window.tf.createWidget("<form-id>", {
  container: document.getElementById("wrapper"),
  hidden: {
    custom_id: "xxxxxxxx"
  },
})

Your suggestion is right and very beneficial for me.

The snippet I provided is the embed code itself. There are 2 ways you can embed:

HTML code

You can use HTML code snippet. It is easier to use, however provides less flexibility, eg. you can not pass custom values from JavaScript. Eg you can only pass hardcoded values to the embedded typeform:

<div data-tf-widget="<typeform-id>" 
     data-tf-hidden="variable1=hardcoded value,var2=hardcoded value2"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>

JS code

You can also build the embed using JavaScript. This requires some programming skills but provides more flexibility. For example you can pass dynamic variables to the typeform. In your case something like this could work:

<!-- this is where the form will be placed in your page -->
<div id="my-widget"></div>

<!-- this is the script to show the form -->
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
window.tf.createWidget("<typeform-id>", {
  hidden: {
    contactId: whatever?.currentSiteUser?.contactId || "empty"
  }
})
</script>

In your case I think you should use JS code to embed, as you have quite an advanced use case.

Amazing! Thank you @mathio 

Did that solve the problem for you, @KajabiChrystle?

Yes! Thank you @Gabi Amaral and @mathio 

For me, we are using the Popup website embed option, and so here’s what my code might look like with your situation:
 

<button

  id="typeform-button"

  data-tf-popup="my-typeform-id"

  data-tf-opacity="100"

  data-tf-hide-headers

  data-tf-size="100"

  data-tf-iframe-props="title=my-title"

  data-tf-auto-close="5000"

  data-tf-medium="snippet"

>

  Fill out form

</button>

<script>

  const button = document.getElementById('typeform-button')

  button.dataset.tfHidden = ‘contact_id=' + getUserContactId()

</script>

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

What I have above is just a modified version of the default html code typeform provides in the Share tab of your form. Note that in place of “my-typeform-id” and “my-title”, you should put your actual typeform id and title. And there’s some other styling code that typeform normally provides but I omitted it above for simplicity.

Also, make sure to actually add the hidden field to your form schema (and publish your changes!), as explained in Using Hidden Fields. And here is another article that adds some additional context to my code above: Use Hidden Fields in embedded typeforms