I am using webflow’s new user accounts and wants to add a iframe that shows the users address on a map.
The code I have for the iframe is:
However as it is not a CMS, I can’t pull in a custom field. I found a way that memberstack does it and wondering if I can do the same with custom code as they do:#19 - Add URL From Custom Field To IFrame SRC | Webflow Powerups
I have no idea how to code, so any help would be appreciated!
Yes, you can use SA5’s User Info lib to access a logged in user’s email, name, custom fields and access groups.
On page load, an event is fired with the User object and you can pull the custom user data field you want.
The custom code would something look like this, and go only on the page with your IFRAME ( before head area ). Let’s suppose your IFRAME has an ID of my-iframe and your custom user field is named iframe-link.
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged',
(user) => {
if(user.user_data_loaded.custom_fields) {
// Here you apply your custom data URL to your IFRAME src
document.getElementById('my-iframe').src = user.data['iframe-link'];
}
}]);
</script>
Great thanks @memetican
I am still doing something wrong:
do you know what it is? I replaced the API key, but not sure where to paste the link…
It’s not clear what you’re doing. Are you just storing the user’s address and not a URL? The code example you gave was for storing a URL.
If you’re only storing an address, you need to create the URL you want and set that to the iframe’s src.
You’ll really need to figure out what you want and what you’re creating as your src URL,
Here’s some code you could possibly play with;
...
const apikey = "YOUR-API-KEY";
const encodedAddress = encodeURIComponent(user.data['Address']);
const url = `https://www.google.com/maps/embed/v1/place?q=${encodedAddress}&zoom=17&key=${apikey}`;
document.getElementById('my-iframe').src = url;
...
If you need help building this out, DM me, this is what I do.