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.
Comments
4 comments
Hi, I have added this code to my Webflow html embed & have updated with everything that is necessary such as form id, type form id & member-stack field id, but it doesn't work.
I have looked into console & It give member error.
Can anybody please help me out.
Is there anything that I am doing wrong, can anybody please help me out.
Just updated the code and i tested it. It should work now.
Hi memberstack team!
I was hoping you could help. This is really handy and I have got it working for Memberstack information.
However, I would like to parse through Webflow CMS information at the same time. So as well as Typeform recognising the logged-in user details, I can send through the page title and other CMS items. This is easily done on its own, but I am not sure how to achieve it at the same time as sending through the Memberstack info as above.
Thanks in advance!
I'm unable to get this working. have ticket open with memberstack
also have request open in slack chat under bugs
Please sign in to leave a comment.