How to pass logged-in user data to embedded typeform

Thanks @alexs,

This will be helpful, indeed :star_struck:

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]

  1. 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]

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

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

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

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

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

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

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 :raised_hands:

1 Like

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>

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?

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

3 Likes

Great! What was the issue afterall?

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

2 Likes

@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?
Screen Shot 2023-01-31 at 12.57.08 PM

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

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

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

btw, it worked!!! Thanks so much.

1 Like

Would this work with any other form software like Cognitoforms?

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>