Answered

Adding Memberstack Fields into Typeform as Hidden Fields

D
Badge

Hello! I’ve been trying to get Typeform to pull Memberstack data so that I can use it in Zapier to customize my user experience. I have not been able to figure it out, but I know it is possible.

I’ve referenced a few threads in here, but they are a bit old and I think Memberstack 2.0 may have outdated them.

 

Currently, my set up is this. A typeform embed on a Webflow page (which is gated through memberstack).

 

The embed I have that activates this looks like:

 

<button data-tf-popup="EBbuj8Mt" data-tf-size="100" data-tf-open="load" 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:#0445AF;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>

 

The script I found that is supposed to allow fields to pass from Memberstack to Typeform is:

 

<!-- load new typeform embed library -->
<script src="//embed.typeform.com/next/embed.js"></script>

<!-- customize with javascript -->
<script>
MemberStack.onReady.then(function(member) {
  // create widget typeform
  window.tf.createWidget("EBbuj8Mt", {
    container: document.querySelector('#typeform-memberstack'),

    // pass hidden fields if user is logged in
    hidden: member.loggedIn ? {
      id: member["id"],
      email: member["email"],
    } : {}
  })
})
</script>

 

I have hidden fields on my Typeform, both email and memberEmail

 

Can anybody spot what’s wrong in this and help me out? 

 

Thank you!

icon

Best answer by mathio 26 October 2022, 00:14

View original

12 replies

Liz
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.
D
Badge

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!

mathio
Rank
Userlevel 7
Badge +5

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 😃

D
Badge

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

E
Userlevel 1
Badge

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

mathio
Rank
Userlevel 7
Badge +5

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

D
Badge

@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 :)

mathio
Rank
Userlevel 7
Badge +5

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>

 

D
Badge

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
Rank
Userlevel 7
Badge +5

Well, this is not a JavaScrip 101 class, but lets try this :) Remove any Typeform related code from your page and copy-paste this to see if it helps:

<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />

<script> 
const popupOpened = false
const init = () => {
  MemberStack.onReady.then((member) => {
    if (popupOpened) {
      console.log('popup is already open')
      return
    }
    console.log('memberstack member data', member)
    const popup = window.tf.createPopup("EBbuj8Mt", { 
      hidden: member.loggedIn ? {
        id: member["id"],
        email: member["email"],
       } : {}
    })
    popup.open();
    popupOpened = true
  })
}
init()
window.addEventListener('load', init)
</script>

Also keep in mind that copy-pasting code from strangers on the internet into your website is not the safest thing to do 😜

D
Badge

@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

mathio
Rank
Userlevel 7
Badge +5

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

 

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs