Typeform

You can use the new Memberstack 2.0 front-end API and the following code to inject Typeform embedded widgets w/ hidden fields on your page.

This article applies to static / multi-page sites like Webflow.  See here if you’re using a single-page app framework (like React or Vue).

Create the Typeform Widget

Place at the end of the body section of whatever page you want the form to appear.

<script>
  // replace qVTlfl9j with your unique Typeform ID
  const TYPEFORM_ID = 'qVTlfl9j';

  // the config below matches typeform hidden field IDs to corresponding memberstack field IDs
  // add an object for every field you want to pass to typeform
  const TF_CONFIG_MAP = [
    {
      typeform_field_id: 'first_name',
      memberstack_field_id: 'customFields.first-name',
    },
    {
      typeform_field_id: 'phone',
      memberstack_field_id: 'customFields.phone',
    },
  ];

  // YOU DONT NEED TO MODIFY ANYTHING BELOW THIS LINE
  function generateHiddenFields({ config, member }) {
    let str;
    let fields = config;
    if (!fields) {
      str = [];
      return;
    } else {
      str = fields.map((key) => {
        let { memberstack_field_id, typeform_field_id } = key;
        let ms_field_value = memberstack_field_id
        .split('.')
        .reduce((acc, val) => {
          return acc[val];
        }, member);
        return `${typeform_field_id}=${ms_field_value}`;
      });
    }
    str.push(`memberstack_id=${member.id}`);
    str.push(`email=${member.auth.email}`);
    return str.join(',');
  }

  const GENERATED_TYPEFORM_STRING = (member) => {
    return generateHiddenFields({
      config: TF_CONFIG_MAP,
      member,
    });
  };

  function injectTypeform(member) {
    let tfEl = document.createElement('div');
    let anchor = document.getElementById('tf-wrapper');

    tfEl.id = 'tf-form';

    tfEl.setAttribute('data-tf-widget', TYPEFORM_ID);
    tfEl.setAttribute('data-tf-inline-on-mobile', true);
    //tfEl.setAttribute('data-tf-hide-headers', true);
    tfEl.setAttribute('data-tf-transitive-search-params', true)
    tfEl.setAttribute('data-tf-medium', 'snippet');


		console.log("generated: ", GENERATED_TYPEFORM_STRING(member))
    tfEl.setAttribute('data-tf-hidden', GENERATED_TYPEFORM_STRING(member));
    tfEl.setAttribute("style","height:100%");
    tfEl.setAttribute("width","height:100%");

    anchor.appendChild(tfEl);

    var typeformScript = document.createElement('script');
    typeformScript.setAttribute(
      'src',
      '//embed.typeform.com/next/embed.js'
    );

    document.head.appendChild(typeformScript);
  }

  window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
    if (member) {
      injectTypeform(member);
    }
  });
</script>

ℹ️ Memberstack's getCurrentMember() method runs AFTER the page loads, so the member data isn’t available right away. This means we can’t statically embed a Typeform widget w/ hidden member fields (because the member data will be undefined at first.)

To solve this, we must use JavaScript (above) to dynamically create a form widget when member data is ready and then inject it on the page.

Map Input Fields

You can pass as many key-value sets of Typeform & Memberstack fields that you want inside of the TF_CONFIG_MAP array.

This configuration array will later be passed to a special Memberstack API method that returns a properly formatted string (of dynamic member data) that Typeform expects on the form widget’s data attributes.

The config array is just a set of objects that describe the field IDs for Typeform and Memberstack respectively. (You don't need to copy/paste this code again).

// the config below matches typeform hidden field IDs -
// to corrosponding memberstack field IDs
// add an  object for every field you want to pass to typeform
const TF_CONFIG_MAP = [
  {
    typeform_field_id: "first_name",
    memberstack_field_id: "customFields.first-name",
  },
  {
    typeform_field_id: "phone",
    memberstack_field_id: "customFields.phone",
  }
]

⚠️ Make sure you’re spelling Typeform field IDs AND Memberstack custom fields exactly as they say to be referenced. For more info on Typeform attributes, see here.

For each object, you pass in the array, replace the <field-id> placeholder with the corresponding field ID for each service.

{ 
 typeform_field_id: "YOUR_TYPEFORM_FIELD_ID",
"memberstack_field_id": "customFields.YOUR_FIELD_ID" }

The Custom Field ID can be found on each custom field’s setting popup.