Amazing, exactly what i was looking for! 2 questions if you can help me: Is it possible to grab the logged in user record id? How can i mix this script with this one;
button data-tf-popup=“yK2uX6ST” data-tf-hidden=“email=xxxxx,name=xxxxx” style=“all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#5CD6C8;color:#000000;font-size:16px;border-radius:4px;padding:0 26px;font-weight:bold;height:40px;cursor:pointer;line-height:40px;text-align:center;margin:0;text-decoration:none;”>Launch me
Thanks in advance for any help
Just added the recordId too
1 Like
Hello! I’m trying to set this up and the user email is not being passed in…I tried it as it says above with just ‘email=’ as well as ‘&email=’, but it’s not getting passed in. When I go to my users just to confirm the email is there (which it must be since I’m logged in??) I don’t see the user email in the users dashboard.
Sorry, I got it figured out - I had a typo in my Typeform hidden field name!!
Does the same exist for the Typeform side tab embed?
Hey @Artur,
I refactored a much clearer version of this code, that may be helpful to others as well. (This reflects Typeform’s apparent change in their embed widget.)
<script>
if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
nameData = 'name=' + window['logged_in_user']['Name'];
jobData = 'job=' + window['logged_in_user']['Job'];
hiddenFields = nameData + `,` + jobData;
document.writeln(`<div data-tf-widget="x2x2x2x2x" data-tf-iframe-props="title=Typeform Title" data-tf-hidden="`+ hiddenFields +`" style="width:100%;height:650px;"></div>
`);
}
</script>
<script src="//embed.typeform.com/next/embed.js"></script>@bridgebuilder sorry for the delay here. If you need immediate help support chat works faster 
1 Like
Hi all, I’m wondering if anyone has had success passing in a URL parameter. I’ve tried a few different formats and nothing is working properly.
Can anyone share an example or the correct formatting to pass in a URL parameter to the embedded typeform?
Thanks!
For anyone else interested, I was able to solve it with the following:
if(window[‘logged_in_user’] && window[‘logged_in_user’][‘softr_user_email’]) {
typeformUrl = typeformUrl + ‘&name=’ + window[‘logged_in_user’][‘softr_user_full_name’];
typeformUrl = typeformUrl + ‘&email=’ + window[‘logged_in_user’][‘softr_user_email’];
}
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('recordId');
typeformUrl = typeformUrl + ‘&bridgeid=’+ dynamicContent;
1 Like
Hey,
Thanks for posting this here
Hi @Ezra , I’m not a great coder – where do you put the typeform link? also, what is a ‘Job’, or is that specific to your app? Does artur’s original code no longer work?
Hi Blaine,
“Job” was part of my form.
And data-tf-widget=“x2x2x2x2x” is where you put the specific code for the Typeform.
If I remember correctly, it didn’t work for me, or I wasn’t able to customize it as I wanted.
Good luck!
Ezra
1 Like
Didn’t work for me either! If anyone figures this out, please let us know
Picking up that thread as I am trying to embed a button in a list detail. It works like a charm with the typeform code
<button data-tf-popup="XGgC6uFN" data-tf-size="100" data-tf-hidden="email=" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#FFFFFF;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Try me!</button><script src="//embed.typeform.com/next/embed.js"></script>
However, when I am trying to get this to pick up a logged-in user email, it does not work, with the page only showing the below, where the link is not even clickable.
The code I have been using is
<script>
if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
emailData = 'email=' + window['logged_in_user']['softr_user_email'];
document.writeln(`<button data-tf-popup="XGgC6uFN" data-tf-size="100" data-tf-hidden="`+ emailData +`" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#FFFFFF;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Try me!</button>
`);
}
</script><script src="//embed.typeform.com/next/embed.js"></script>
Where am I wrong? @artur once this is resolved, i swear I am taking your Business subscription 
Edit: this code is fed from my airtable to a list detail
Should it open a new page, embed or popup ?
It should open an embed popup
Thanks to @artur incommensurable help, here’s the code that works
<!-- Add those to the page settings -> custom code -> header area -->
<script src="https://embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="https://embed.typeform.com/next/css/popup.css" />
<button id="XXXTYPEFORM_IDXXX" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#FFFFFF;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Schedule!</button>
<script>
(function() {
let typeformId = 'XXXTYPEFORM_IDXXX';
let emailData = '';
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>
2 Likes
Thanks for sharing this, very helpful…yet it didn´t work for me as posted.
I needed to put the embed.typeform script right into the custom code block, it didn´t work if placed in the page header.
Furthermore I reformatted the button slightly - maybe this is helpful for some of you as well.
Here is the code which works for us now:
<button id="XXXXX" 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;">UPDATE MY PREFERENCES</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 = 'XXXXX';
let recordid_data = '';
let name_data = '';
if(window['logged_in_user'] && window['logged_in_user']['airtable_record_id']) {
recordid_data = window['logged_in_user']['airtable_record_id'];
name_data = window['logged_in_user']['First Name'];
}
const intervalId = setInterval(() => {
if(window.tf == undefined || !window.tf.createPopup) {
return;
}
clearInterval(intervalId);
document.querySelector('#' + typeformId).onclick = function() {
window.tf.createPopup(typeformId, {hidden: { recordid: recordid_data, name: name_data }}).open();
}
}, 100);
})();
</script>
1 Like
