How to pass logged-in user data to embedded typeform

[buyerbucket]

Basically i’m trying to go from a fixed height to an auto height:

[buyerbucket]

@Viktoria do you know why the screenshot is not working to autopopulate email and name?

[SamEasy]

Hi there,

I’m using the code from above to create a button that opens a pop-up with my desired Typeform. Would anyone know how to use the data-tf-disable-scroll / disableScroll property within the pop-up so that a user can’t navigate using their scrollbar/mouse?

cc: @artur – curious if you have any suggestions since you provided the original answer. Thanks in advance!

<button id="XXXXXX" style="all:unset;font-family:IBM Plex,sans-serif;display:grid;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#2E7EF9;color:#FFFFFF;font-size:16px;border-radius:9px;padding-left: 100px; padding:0 26px;font-weight:bold;height:40px;cursor:pointer;line-height:40px;text-align:center;margin:auto; text-decoration:none;">Get started</button>

<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 = 'XXXXXX';
        let recordid_data = '';
        if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
            recordid_data = 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: { user_id: recordid_data}}).open();
            }
        }, 100);
    })();
</script>

[artur]

@SamEasy is there a way for me to check it in action ?

You could try replacing this line
window.tf.createPopup(typeformId, {hidden: { user_id: recordid_data}}).open();

with this one

window.tf.createPopup(typeformId, {hidden: { user_id: recordid_data}, disableScroll: true}).open();

[Cody]

Alright I am attempting to accomplish something similar to this except with miniextensions form.

This form is for entering product information and I want clients to only be able to see their information when they interact with the form

Had to delete “SCRIPT” at the start so you could see it.

if (window[‘logged_in_user’] && window[‘logged_in_user’][‘softr_user_email’]) {
console.log(‘User is logged in and has an email address.’);

const emailData = ‘prefill_Supplier=’ + encodeURIComponent(window[‘logged_in_user’][‘softr_user_email’]);
console.log(‘User email:’, window[‘logged_in_user’][‘softr_user_email’]);
const queryParams = emailData;

const iframeSrc = ‘https://web.miniextensions.com/dkmshgOrN04uVZM5iPea?’ + queryParams;
console.log(‘Generated iframeSrc:’, iframeSrc);

document.writeln( <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 1200px;"> <iframe id="miniExtIframe-dkmshgOrN04uVZM5aaa" src=" + iframeSrc + " width="80%" height="100%" frameborder="0"></iframe> </div> );
} else {
console.log(‘User is not logged in or does not have an email address.’);
}

I can currently grab the logged in user info and pass it into some of the fields in the form. but the field I really need to pass it to is a linked record field so all possible linked records will only show the ones with the proper email address.