Memberstack x Webflow x Typeform

What I’ve tried to do is implement a script to get the Memberstack ID for those people that is logged in on my site, and populate it to Typeform hidden fields.    

I’ve put this script in the “before </body>” in Webflow:

<script>
MemberStack.onReady.then(function(member) {
let memberEmail = member["email"];
let memberId = member["id"];
  if (member.loggedIn) {
let src = "https://iydvnzswmgv.typeform.com/to/p43ZODjd#id=" + memberId + "&email=" + memberEmail;
let typeformElement = document.getElementById("typeform-memberstack");
typeformElement.setAttribute("data-url", src);
return src
};
})
.then(() => {
typeformCode();
});
function typeformCode() {
var qs,
js,
q,
s,
d=document,
gi=d.getElementById,
ce=d.createElement,
gt=d.getElementsByTagName,
id="typef_orm",
b="https://embed.typeform.com/";
if(!gi.call(d,id)) {
js=ce.call(d,"script");
js.id=id; js.src=b+"embed.js";
q=gt.call(d,"script")[0];
q.parentNode.insertBefore(js,q);
}
}
</script>

And put this in an HTML-embed:

<div class="typeform-widget" id="typeform-memberstack" 

data-url= "https://iydvnzswmgv.typeform.com/to/p43ZODjd#id=unknown&email=unknown" 

style="width: 100%; height:100%"></div>

It should be the right way to do it, but the hidden fields in Typeform just says “unknown”. I’m not sure why, but it can be that I have messed up how I put in all the different scripts on my site: https://preview.webflow.com/preview/espens-amazing-site?utm_medium=preview_link&utm_source=designer&utm_content=espens-amazing-site&preview=e48560c9c9437ce2f821004da8f708e9&pageId=61bb828948c415dd71cd051c&workflow=preview

The above is a little more coding than I prefer, so I’m happy if you have an idea to do this in another way :) 

Lastly, the reason I need to get the MemberstackID in Typeform hidden fields is that I use it as the userID for the event tracking I do across apps: https://segment.com/docs/connections/spec/identify/

/Espen

That didn’t work. Do you have a suggestion on how to do this with a slider-modal @mathio ?

It actually worked! Thank you so much @mathio !

Here’s the code for those interested.

In “Before </Body> tag” in Webflow:

<link rel="stylesheet" href="//embed.typeform.com/next/css/slider.css" />
<script>
MemberStack.onReady.then(function(member) {
      const slider = window.tf.createSlider('FormId', {
        medium: 'whatever',
        hidden: member.loggedIn ? {
      id: member["id"],
      email: member["email"],
    } : {},
      })
      document.getElementById('buttonId').onclick = function () {
        slider.toggle()
      }
})
</script>

In HTML-embed on page:

<button id="buttonId">Button text</button>
<script src="//embed.typeform.com/next/embed.js"></script>

🙏

Hello,

This looks useful but I’m really struggling I’m afraid. Like the others, I have Webflow + Memberstack + Typeform. We use Typeform and VideoAsk extensively so I really want to crack this for our logged in users.

Finally, what are you saying should be:

• In the embed placeholder on the page
• And before </body> on the page?

I’m trying to do this with this Typeform: https://dttt.typeform.com/to/BQ538Mki#name=xxxxx&email=xxxxx&member=xxxxx

Tried everything and no luck - it may be that I’m confused by the above :(

Hello @DTTT 

you pass your Typeform ID as first argument to the createSlider method:

// "FormId" on the line below is your Typeform ID
const slider = window.tf.createSlider('FormId', { /* ... */ })

Hi @DTTT I am sorry but thats not how this works. You are modifying the HTML code before initializing your form. However for advanced use cases like this there is a JavaScript API you can use to achieve the same thing but with less “hacking”

Also, for some reason you are using old embed library - where did you get that code from? 

I think a code like this could work for you:

<!-- place this where you want to display your form -->
<div class="typeform-widget" id="typeform-memberstack" style="width:100%;height:800px;"></div>


<!-- place this before </body> -->
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css"/>
<script>
MemberStack.onReady.then(function(member) {
  let memberEmail = member["email"];
  let memberId = member["id"];
  if (member.loggedIn) {
    const typeformElement = document.getElementById("typeform-memberstack");
    window.tf.createWidget('YwKeXW2u', {
      container: typeformElement,
      hidden: {
        member: memberId,
        email: memberEmail,
      }
    })
  };
})
</script>

Let me know if it helped.

In your typeform I see the following hidden fields:

• name
• email
• member"

If you want to pass additional hidden fields you need to add them when creating your typeform.

I dont know what is the structure of data in member object from MemberStack, I am not familiar with that service. You can do console.log(member) in your code to see the structure.

Then you need to map values from member variable to hidden fields. It does not happen at the line you pointed out, but rather here:

hidden: {
  member: memberId,
  email: memberEmail,
}

So to skip the temporary variables you can delete the lines with variable definitions (starting with let) and you could map the values directly like this:

hidden: {
  member: member["id"],
  email: member["email"],
  another_value: member["another_value"],
  etc: member["etc"],
}

This assumes there are keys named another_value and etc  in member object. It also assumes you created hidden fields named another_value and etc in your typeform. To determine correct keys you can look at the output of the console.log I mentioned above in your browser console.

Happy to help 🚀

I am sorry but I dont have sufficient knowledge on VideoAsk. @Liz any idea who could help with this?

Hi @DTTT, just catching up on this thread 🙂

It sounds like you want to pull in URL parameters from the webpage into your VideoAsk embed, is that correct?