Adding Memberstack Fields into Typeform as Hidden Fields

Hi @dlinger13 While I’m not familiar with Memberstack, possibly @Espen , who uses the platform, can help you or @mathio with any code. 

That would be awesome! @mathio solved it on the older version. I’ve tried the current solution and I can’t get it to work. Would love your insight @mathio or @Espen!

Hi @dlinger13 

looking at your code - you want to build a popup embed, right? And you dont need a button to open the popup because you want to open it automatically, correct?

In that case you need a code like this (explanations in code comments below):

<!-- load typeform embed library JS and CSS -->
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />

<!-- javascript to launch the popup when memberstack data are available -->
<script>
MemberStack.onReady.then(function(member) {
  // create popup typeform
  const popup = window.tf.createPopup("EBbuj8Mt", {
    // pass hidden fields if user is logged in
    hidden: member.loggedIn ? {
      id: member["id"],
      email: member["email"],
    } : {}
  })

  // open the popup right away
  popup.open();

  // if you want to have a button to open the popup manually
  document.querySelector('button#tf-memberstack-button').onclick = () => {
    popup.toggle();
  };
})
</script>

I havent tested the code but hopefully it works 😃

Okay got it! I put that in the Body but I don’t see it populating here. 

I shot this super quick Loom that I think would help a bunch.

There is a chance that I am putting this in the wrong location. Please let me know. Thank you so much for your help! I really appreciate it!

There

I use this as ambedd-code:

<button id="book-møte" data-tf-width="550" style="all:unset;font-family:Work Sans,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#00000000;color:#ffffff;font-size:14px;border-radius:20px;padding:0 26px;font-weight:medium;height:40px;cursor:pointer;line-height:40px;text-align:center;margin:0;text-decoration:none;">Book møte og begynn vekstreisen</button>
<script src="//embed.typeform.com/next/embed.js"></script>

And this in “Before </body> tag” i Webflow:

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

It’s a while since I’ve implemented it, so I can’t remember the details. But it works ;)

The CTA-button on this website: https://www.dtb.digital/

Espen

@dlinger13 do you have a public page where I can see your code? I tried locally and the code seems to work fine.

Maybe your MemberStack.onReady callback is not executed? You can try to debug it via Chrome Devtools Console and putting some console.log(member) in your code to see if the code is executed and user is logged in.

@mathio Sure no problem. This is a public version of that page. 

https://www.dtmuniversity.com/define-goals-copy

So you’re able to pull hidden fields on your local setup? I’m not able to see any hidden fields when I try to pull in data from my Typeform with Zapier (see below).

Thanks again for the help, you are helping to restore my sanity :)

You should remove the HTML embed code in favor of JavaScript. Remove this part not to open a typeform without hidden fields:

<button data-tf-popup="EBbuj8Mt"...></button><script src="//embed.typeform.com/next/embed.js"></script>

You can see you have an error in your page console like this:

Uncaught ReferenceError: MemberStack is not defined

You can try to solve this issue by wrapping your embed code to load only after the whole page (including MemberStack library) has loaded:

<script>
window.addEventListener('load', (event) => 
  MemberStack.onReady.then(function(member) {
    // ...
  })
})
</script>

Okay @mathio got it. So HTML embed is not the way for this? What’s the best way to have a Typeform popup with JS? I tried placing that original code into the Body, but nothing loads. 

I also tried adding in that script you just sent me, to the original code and using that as an HTML embed. That didn’t work either.

<script> window.addEventListener('load', (event) => MemberStack.onReady.then(function(member) { // ... }) }) </script><button data-tf-popup="EBbuj8Mt" data-tf-size="100" data-tf-open="load" data-tf-hidden="email=,memberemail=" 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:#FFFFFF;color:#FFFFFF;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;"></button><script src="//embed.typeform.com/next/embed.js"></script>

Sounds like the best thing to do would be to have a script that loads the Typeform in Java?

@mathio I know I know haha, I feel like a newbie because I am a newbie in Java. 

Any chance you can clone your local page so I can copy it over to mine?

I’ve input this exact code into my site and the Typeform doesn’t pop up. It’s driving me mad and I feel like I might be making you a bit crazy too haha

The issue is most likely because you are using MemberStack version 2.0 and the code above is for MemberStack version 1.0.

You can find their migration guide here:
https://memberstack.notion.site/Convert-1-0-front-end-API-code-to-2-0-DOM-code-199c692e55fe441cad731f9e182db2f5

Full documentation is available on MemberStack site:
https://memberstack.notion.site/DOM-Package-API-1b026c6f928e4436b38f9146dd3d6584

Excerpt from their migration guide:

Code like this:

MemberStack.onReady.then(function(member) { 
  if (member.loggedIn) {
    console.log(member);
    // TODO: open typeform with member data as hidden fields here
  }
})

Will become this:

await window.$memberstackDom.getCurrentMember(member => {
  // no need to check if user is logged in
  // this code is executed only for logged in users
  console.log(member);
  // TODO: open typeform with member data as hidden fields here
})