Bubble

1. Install Plugin:

  • Click on the Plugins option in the Navbar.
  • Click on Add Plugins on the top right corner of the page
  • Click on the 'Search for a plugin' search bar and type SAWO
  • Install the SAWO Passwordless Login plugin by clicking on install as displayed in the below screen.

2. Setup the Plugin:

  • Navigate to the Design tab under Input Forms.
  • Click on 'sawo-login' option,this will create a new form.
  • Now, drag and drop the sawo-login form in the workplace.
  • Select your identifier in the login form: “email” or “phone_number_sms”.

3. Setup your SAWO Project:

On SAWO Dashboard:
  • Create a project in the SAWO Dashboard
  • Login to the Dashboard and click on 'Create Project'.
  • In the popup ,under select setup method click on Bubble.
  • Click on Continue on the Bottom right corner.
  • Create new project popup would would appear,set your Project name.
  • For Hostname, Go back to your bubble application page and click on Preview. On the preview page copy the site URL and copy the url till you encounter the first '/ ' now return to your sawo dashboard and paste this host name.
  • Click on create project and this generates your credentials
  • Now Copy your API Key and head back to the Bubble Application Page.
On Bubble App Page:
  • In the Design Tab of Bubble app page, click on the sawo-login form twice again and in the API section, add your API key you had copied.
  • And then click on workflows in the navbar to set your workflow.

4. Workflows

  • Go to the “Data” tab on Bubble app page and go to “Privacy” from the sections availaible.
  • Make sure to check the boxes “email” and “Find this in searches”.

Creating EMAIL workflow:

To complete the Bubble integration for Email workflow, we have to create three events: Signup, Login and Sawo-login A dbcheck.
Make sure you have selected your idenifier in the sawo-login form as “Email” in the Design tab.
Go to the “Workflows” section to create the following events:

A. signup custom event

  • Click on "click here to add an event"
  • Hover over "Custom", click on “create a custom event” and name it as: “signup”.
sign the user up action:
  • Click on 'add action'.
  • Hover over 'account' and Click on 'sign the user up' in the right hand column.
  • In the popup form add the email by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's identifier" in case of email.
  • In the popup form add the password by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's password" in case of password.

B. login custom event

  • Click on "click here to add an event"
  • Hover over "Custom", click on “create a custom event” and name it as: “login”.
log the user in action:
  • Click on 'add action'.
  • Hover over 'account' and Click on 'log the user in' in the right hand column.
  • In the popup form add the email by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's identifier" in case of email.
  • In the popup form add the password by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's password" in case of password.

C. sawo-login A dbcheck event

  • Click on "click here to add an event"
  • Hover over "Elements", click on “A sawo-login dbcheck”.
Trigger signup action:
  • Click on 'add action'.
  • Hover over 'custom events' and Click on 'trigger a custom event' in the right hand column.
  • In the popup form, choose “signup” as the trigger custom event.
  • Go to only when and add “Do a search for”.
  • Click on the side and select “:each item’s email”
  • Again click on the side and select “doesn’t contain”
  • Click to get “sawo-login A” and after that click on “ ‘s identifier”
Trigger login action:
  • Click on 'add action'.
  • Hover over 'custom events' and Click on 'trigger a custom event' in the right hand column.
  • In the popup form, choose “login” as the trigger custom event.
  • Go to only when and add “Do a search for”.
  • Click on the side and select “:each item’s email”
  • Again click on the side and select “ contains”
  • Click to get “sawo-login A” and after that click on “ ‘s identifier”

Creating PHONE workflow:

To complete the Bubble integration for Email workflow, we have to create three events: Signup, Login and Sawo-login A dbcheck.
Make sure you have selected your idenifier in the sawo-login form as “phone_number_sms” in the Design tab.
Also, complete the following steps to create a Phone Workflow:
  • Go to “Settings” and then “Languages”
  • Go to “Create a new app text” and click on “Create text”
  • Give any name to the app text like “new_domain”.
  • Scroll down to find the app text id given and add the text as ‘@xyz.com’
[You can use your company’s name too format should be @text.com]
Go to the “Workflows” section to create the following events:

A. Signup custom event

  • Click on "click here to add an event"
  • Hover over "Custom", click on “create a custom event” and name it as: “signup”.
sign the user up action:
  • Click on 'add action'.
  • Hover over 'account' and Click on 'sign the user up' in the right hand column.
  • In the popup form add the email by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's identifier" in case of email.
  • Click on More and select ':append' .
  • Next in 'Search' click on more and select 'App Text' .
  • In the popup, click on the 'Text ID' Drop down and choose the text id you created earlier in the beginning of the workflow: “new_domain”.
  • In the popup form add the password by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's password" in case of password.

B. login custom event

  • Click on "click here to add an event"
  • Hover over "Custom", click on “create a custom event” and name it as: “login”.
log the user in action:
  • Click on 'add action'.
  • Hover over 'account' and Click on 'log the user in' in the right hand column.
  • In the popup form add the email by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's identifier" in case of email.
  • Click on More and select ':append' .
  • Next in 'Search' click on more and select 'App Text' .
  • In the popup, click on the 'Text ID' Drop down and choose the text id you created earlier in the beginning of the workflow: “new_domain”.
  • In the popup form add the password by clicking on the input field provided,then selecting 'sawo-login A' from the dropdown.
  • Now set it to " 's password" in case of password.

C. SawoAdbcheck event

  • Click on "click here to add an event"
  • Hover over "Elements", click on “A sawo-login dbcheck”.
Trigger signup action:
  • Click on 'add action'.
  • Hover over 'custom events' and Click on 'trigger a custom event' in the right hand column.
  • In the popup form, choose “signup” as the trigger custom event.
  • Go to only when and add “Do a search for”.
  • Click on the side and select “:each item’s email”
  • Click on “Search” and search for Find and replace, you will get “:find&replace”
  • Click on “:find&replace” and you will get a popup.
  • In the popup, click on “Text to find” and go to “Insert Dynamic Data” and search for “App text”.
  • From the app text dropdown, choose your app text id: “new_domain”
  • Again click on the side and select “doesn’t contain”
  • Click to get “sawo-login A” and after that click on “ ‘s identifier”
Trigger login action:
  • Click on 'add action'.
  • Hover over 'custom events' and Click on 'trigger a custom event' in the right hand column.
  • In the popup form, choose “login” as the trigger custom event.
  • Go to only when and add “Do a search for”.
  • Click on the side and select “:each item’s email”
  • Click on “Search” and search for Find and replace, you will get “:find&replace”
  • Click on “:find&replace” and you will get a popup.
  • In the popup, click on “Text to find” and go to “Insert Dynamic Data” and search for “App text”.
  • From the app text dropdown, choose your app text id: “new_domain”
  • Again click on the side and select “ contains”
  • Click to get “sawo-login A” and after that click on “ ‘s identifier”
Last modified 9d ago