How to pass logged-in user data to embedded typeform

[Suzie]

Thanks @alexs,

This will be helpful, indeed

[Luay]

Hey guys, still having issues with this! Hope someone can help?

Steps I took:

1. Added the email and name ‘hidden fields’ into my Typeform-build so that it captures it in the results:

[Screenshot 1 in attachment]

2. Copied this code (shared by @rbnplt ) into the Page > Custom code setting. And added the unique Typeform ID (highlighted in red) and the email data label ‘email’ (as is labelled in Airtable, Softr, and Typeform) highlighted here in blue:

[Screenshot 2 in attachment]

3. I then added the actual Typeform code snippet into the custom code block itself. This part works fine as the Typeform appears all ok when the app is published.

[Screenshot 3 in attachment]

Note: I also tried @alexs approach but didn’t have luck there neither. Hope someone can help!

Cheers

[artur]

@Luay can you pls share where exactly this code is being added ?

[Luay]

Hi @artur this code is being into Pages > Pages Settings > Custom Code > ‘Code inside header’:

And I am adding the Typeform embed code into the ‘custom code block’ itself (as per screenshot 3 in the first attachment above).

Thanks

[artur]

@Luay the code you shared needs to go into custom code block and not page settings. Pls try putting this into custom code block.

[Luay]

Hi @artur , ok thanks. I have instead placed the code all into the Custom code block itself. Typeform appears all ok: it shows up on the published app and captures the info fine. However, still not able to collect the hidden ‘email’ in the results on Typeform.

The code is as follows;

<div class="w-100 text-center"><p class="h6"><div data-tf-widget="RmcFJGeZ" data-tf-opacity="100" data-tf-iframe-props="title=My typeform" style="width:100%;height:500px;"></div>
<script src="https://embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="https://embed.typeform.com/next/css/popup.css" />
<script>
    (function() {
        let typeformId = 'RmcFJGeZ';
        let emailData = 'email';
        if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
            emailData = window['logged_in_user']['softr_user_email'];
        }

        const intervalId = setInterval(() => {
            if(window.tf == undefined || !window.tf.createPopup) {
                return;
            }
            clearInterval(intervalId);
            document.querySelector('#' + typeformId).onclick = function() { 
                window.tf.createPopup(typeformId, {hidden: { email: emailData }}).open();
            }
        }, 100);
    })();
</script>

Thank @artur

[artur]

Pls DM a link with details so I can login and check

[Luay]

Hi @artur managed to get it working ok! Your original code worked just fine after all. Went in circles to start with but got there in the end. Thankss

[P.Kunert]

HI @Luay & @artur can i ask how you did it? i have copy & pasted (in custom code block) the same code but the hidden fields don’t show up on typeform.

Thanks in advance!

<div class="w-100 text-center"><p class="h6"><div data-tf-widget="xx3RzThu" data-tf-opacity="100" data-tf-iframe-props="title=My typeform" style="width:100%;height:500px;"></div>
<script src="https://embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="https://embed.typeform.com/next/css/popup.css" />
<script>
    (function() {
        let typeformId = 'xx3RzThu';
        let emailData = 'email';
        if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
            emailData = window['logged_in_user']['softr_user_email'];
        }

        const intervalId = setInterval(() => {
            if(window.tf == undefined || !window.tf.createPopup) {
                return;
            }
            clearInterval(intervalId);
            document.querySelector('#' + typeformId).onclick = function() { 
                window.tf.createPopup(typeformId, {hidden: { email: emailData }}).open();
            }
        }, 100);
    })();
</script>

[Luay]

Hey @P.Kunert some questions to help you troubleshoot: Are your users signed up and signed in? i.e Are you collecting the email and name start with? Do the field titles match?

[P.Kunert]

@Luay thanks a lot for the input. I manage to run it finally with @Viktoria help. Have nice one!

[Luay]

Great! What was the issue afterall?

[Viktoria]

@Luay
I suggested to add the corresponding typeformId to the script, as well as to add the “email” and “name” hidden fields to the Typeform. Thus the issue is fixed

[buyerbucket]

@artur @Viktoria Here is what i’m using, but it’s not working. Trying to get softr to send typeform the email info. Any ideas?

[buyerbucket]

@P.Kunert What did you end up doing to make this work?

[P.Kunert]

@buyerbucket

Instead of XXXXX add your TypeForm widget ID . You can see the widget when you get the embed code for your TypeForm.

You don’t need to copy and paste your TypeForm embed code. You simply need to add the ID to the code below.

Please make sure you have added hidden fields to your TypeForm to get the user’s emails and names. Here is a tutorial on a Hidden field - https://www.typeform.com/help/a/using-hidden-fields-360052676612/

Add the code below to the Custom Code block in Softr. Make sure you save and publish the app and it should work.

<script> let typeformUrl = 'https://form.typeform.com/to/XXXXX?typeform-medium=embed-snippet#'; if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) { typeformUrl = typeformUrl + 'email=' + window['logged_in_user']['softr_user_email']; typeformUrl = typeformUrl + '&name=' + window['logged_in_user']['softr_user_full_name']; typeformUrl = typeformUrl + '&recordId=' + window['logged_in_user']['airtable_record_id']; } document.write('<div class="typeform-widget" data-url="' + typeformUrl + '" style="width: 100%; height: 500px;"></div>'); </script> <script> (function() { 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>

[buyerbucket]

Thank you. I’ll try this now. I noticed an airtable mention. What’s that for?

[buyerbucket]

btw, it worked!!! Thanks so much.

[flavi]

Would this work with any other form software like Cognitoforms?

[buyerbucket]

Hey again, I wanted to avoid the scrolling happening in the typeform embed code that you had me put in the block. here is the new div block typeform gives me to accomplish this, but the hidden field info isn’t passed…how can I add it back in? Here is what the code from typeform is: <div data-tf-widget="z2yvRhCe" data-tf-opacity="100" data-tf-iframe-props="title=New Buyerbucket Buyer Profile" data-tf-transitive-search-params data-tf-disable-scroll data-tf-auto-resize data-tf-medium="snippet" data-tf-hidden="name=,email=" style="width:100%;height:499px;"></div>**<script src="//embed.typeform.com/next/embed.js"></script>