Embed login in existing external website

Need help
1

Hi, I am new with Bubble and just trying some experiments. Gone trough all the topics in the forum but couldn’t find what I am looking for. My goal is to embed the signup/login form in an existing website. I have created an iframe in the external site like this

<iframe width="100%" height="400px" src="https://mysite.bubbleapps.io/login/">
  <p>Your browser does not support iframes.</p>
</iframe>

In the bubble login page there is a standard login form, with the login button that triggers the “log the user in” workflow. But I cannot find a way to make the bubble site open in a new tab and not into the frame.

I appreciate if you guys can help me and give me advice (I know is probably simple … but I am a very beginner). Many thanks

2

You could use an external link instead of the button used for the “log the user in”

3

Hey @stefanof! Glad to see you in the Forums, beginner or not.

My recommendation, for security and thinking of the future: Build a workflow that can read a “Get data from page URL” line of text. Meaning: Don’t implement an iframe. If you use HTTPS on the site you’re embedding on, your visitors will get ‘mixed content/blocked content’ errors when trying to load the data from an external source

Instead, have a generic login form on your 3rd party site that only asks for an email address. Upon form completion, send the person to your Bubble URL and append “?e=”. In Bubble, create a new workflow “When - General - Page is Loaded” -> AND “when Get e from page URL " do: Show popup element “Login Popup” -> default content for email form field input = “get e from page URL” -> set element focus to Password field.”

This is a much cleaner and scalable approach and allows you to track this data if you have additional workflows in place.

2 Likes