Memberstack x Webflow x Typeform

Hi @Espen Thanks for stopping by the community and sharing this post! Very helpful. 

While I’m not familiar with Memberstack, I can definitely try to help as much as I can. What exactly is the issue you’re running in to? Is the data not passing at all? If you have any code/URL you can share, that would be handy. 

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

@picsoung or @mathio do either of you happen to be familiar with Memberstack/Webflow and/or this code? 

It worked like a charm! Thank you so much

And I guess I’ll use the snippet below instead of the <div id=..> if I want to use the slider-modal?

<button id="typeform-memberstack">open form</button>
<script>
  const { open, close, toggle, refresh } = createSlider('p43ZODjd')
  document.querySelector('#typeform-memberstack').onclick = toggle
</script>

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

@Espen if you looked into the console you would most likely see an error like this:

Uncaught ReferenceError: createSlider is not defined

You need to call function on the tf object: window.tf.createSlider

Also don’t forget to include the embed lib like I did in my example above:

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

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>

🙏

Thank you for sharing the code, @Espen !! Super helpful for anyone else having the same question. 

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 :(

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

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

I get this - but where is the Typeform ID so it knows what to link with? Am I missing something?

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', { /* ... */ })

I’m having no luck and on the point of giving up, this is what I’m doing:

Before </body> tag

<script>
MemberStack.onReady.then(function(member) {
let memberEmail = member["email"];
let memberId = member["id"];
  if (member.loggedIn) {
let src = "https://dttt.typeform.com/to/YwKeXW2u#member=" + 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>

Then using the HTML Embed:

<div class="typeform-widget" id="typeform-memberstack" data-url="https://dttt.typeform.com/to/YwKeXW2u#name=name&email=email&member=member" style="width: 100%; height: 800px;"></div>

Nothing shows up - just blank. A couple of random times a tiny form showed but then it stopped.

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.

Amazing @mathio , it did work!!! Thanks so much I’ve been going crazy with this.

The only thing I’m not able to do now is populate hidden fields other than e-mail. The hidden E-Mail field does go through, but others like Work Organisation and First Name / Last Name - all of which are fields in Memberstack, do not go through - not sure if you have an idea on what to include for these to show?

In any case - I can live with this…!

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.

Hi @mathio  I’ve had no problem using hidden fields generally, it’s just knowing what the correct details to parse from Memberstack to Typeform are in the code… I can only seem to parse e-mail. As you can see below...

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,

Being a bit of a novice on code, I’m guessing that memberEmail = member[“email”] tells Typeform to populate the member’s e-mail from member stack into the hidden field ‘email’.

But I can’t seem to see how to connect the name and organisation fields - what they would be from Memberstack…

You’ve been really helpful so far so if you can crack this one… that’d be amazing.

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.

@mathio wow you are literally a superstar - I was losing my mind, we managed to make our site super slick and personalised but sometimes we need a little help from someone who knows. I really massively appreciate all your help - all hidden fields are now working perfectly!

THANKS!

Happy to help 🚀

Hi @mathio  I have one more question, can I do the same with VideoAsk and then if yes, in the code on the previous post, which elements would I want to be changing? I tried replacing all Typeform text with videoask and making sure the fields correspond with the variables but it didn’t load the widget.

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

Hey @DTTT! Tagging @Grace and @andrew_videoask here as they might be able to help!

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?

Also going to tag in @UnicornRoad as I’m pretty sure they’ve worked with VideoAsk and MemberStack!