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”
​