WebSync for Bubble Mobile is a powerful plugin designed specifically for mobile applications created with Bubble’s mobile editor. It seamlessly integrates a React Native WebView, enabling smooth two-way communication between native and web environments.
The plugin supports sending and receiving all Bubble data types—such as text, numbers, dates, images, files, and custom app types. This allows for dynamic content updates and real-time data exchange between your mobile app and web environments without requiring any coding knowledge.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/4fXUggud
⚠️
Please note that the testing app is currently available for iOS only.
How to setup
To set up the WebSync for Bubble Mobile plugin, follow these steps:
Insert the ‘WebView Native’ element from the plugin section into your page in the Bubble editor for native (mobile) applications.
Set the initial URL to your webpage in the WebView Native properties.
Insert the ‘WebView Web’ element into your web page for web applications.
Use the ‘Send [Data Type]’ actions (e.g., ‘WebView Native - Send Text’) from either element to pass data between the native app and the WebView.
Track received data via the ‘Received [Data Type]’ state (e.g., ‘Received Text’) or by listening for the ‘received [data_type]’ event in workflows.
Plugin Element Properties - WebView Native
The WebView Native element is used in mobile applications to display web content and enable communication with web pages.
Fields
Title
Description
Type
URL
The URI to load in the WebView
Text
HTML Content
A static HTML page to display in the WebView
Text
Received App Type
The type of data (API call type) that will be received
Custom Type
Sent app type
The type of data (API call type) that will be sent
Custom Type
JavaScript Enabled
Enable JavaScript in the WebView
Boolean
Scroll Enabled
Determines whether scrolling is enabled in the WebView
Boolean
Injecte JS
Inject JavaScript Before Content Loaded
Text
Loading Indicator
The loader is visible only during main navigation events
(page loads, form submissions, back/forward navigation, reloads) with a 200ms delay to prevent flashing.
It does NOT appear for AJAX requests or dynamic content loading within the same page.
Loading Type
Type of loading indicator.
Available options: Hide, Progress bar, Circular, Spinner, Dots and Pulse
Dropdown
Loading Color
Color of the loading indicator
Color
Loading Height
Controls the visual size/thickness of all loading indicators in the component.
It defaults to 3 pixels and scales all loader types proportionally - progress bars use it directly for height, while circular, spinner, pulse, and dot loaders scale their dimensions based on this value.
Number
Element Actions
Send Text
Sends text data from the native app to the WebView.
Title
Description
Type
text
Text to be sent to the WebView
Text
Send Number
Sends numeric data from the native app to the WebView.
Title
Description
Type
Number
Number to be sent to the WebView
Number
Send Numeric Range
Sends a numeric range from the native app to the WebView.
Title
Description
Type
Numeric Range
Numeric range to be sent to the WebView
Number Range
Send Boolean
Sends a boolean value from the native app to the WebView.
Title
Description
Type
Boolean
Boolean value to be sent to the WebView
Boolean
Send Image
Sends an image from the native app to the WebView.
Title
Description
Type
Image
Image to be sent to the WebView
Image
Send File
Sends a file from the native app to the WebView.
Title
Description
Type
File
File to be sent to the WebView
File
Send Address
Sends a geographic address from the native app to the WebView.
Title
Description
Type
Address
Geographic address to be sent to the WebView
Geographic Address
Send Date
Sends a date from the native app to the WebView.
Title
Description
Type
Date
Date to be sent to the WebView
Date
Send Date Range
Sends a date range from the native app to the WebView.
Title
Description
Type
Date Range
Date range to be sent to the WebView
Date Range
Send User
Sends a user from the native app to the WebView.
Title
Description
Type
User uid
Configure with User’s ID
Text
Send App Type
Sends a custom app type from the native app to the WebView.
Title
Description
Type
App Type
Custom app type to be sent to the WebView
Custom Data
Inject JavaScript
Injects JavaScript code into the WebView.
Title
Description
Type
Javascript
JavaScript code to be injected into the WebView
Text
Send more params to the page
Adds search parameters to the URL and reloads the WebView.
Title
Description
Type
Params
Key-value pairs to be added as search parameters
Key-Value List
Exposed states
Name
Description
Type
received text
Received text from Web View
Text
received number
Received number from Web View
Number
received numeric range
Received numeric range from Web View
Number Range
received boolean
Received boolean from Web View
Boolean
received image
Received image from Web View
Image
received file
Received file from Web View
File
received geographic address
Received address from Web View
Geographic Address
received date
Received date from Web View
Date
received date range
Received date range from Web View
Date Range
received user
Received user from Web View
User
received app type
Received app type from Web View
Custom Data
received unknown
Received unknown from Web View, saved as a text
Text
is loading
True when WebView is loading a page
Boolean
loading progress
Loading progress from 0 to 100
Number
Element Events
Name
Description
received text
Triggers after receiving text from Web View
received number
Triggers after receiving number from Web View
received numeric range
Triggers after receiving numeric range from Web View
received boolean
Triggers after receiving Boolean from Web View
received image
Triggers after receiving image from Web View
received file
Triggers after receiving file from Web View
received geographic address
Triggers after receiving geographic address from Web View
received date
Triggers after receiving date from Web View
received date range
Triggers after receiving date range from Web View
received user
Triggers after receiving user from Web View
received app type
Triggers after receiving app type from Web View
received unknown
Triggers after receiving unknown data from Web View
loading started
Triggers when page starts loading
loading finished
Triggers when page finishes loading
Plugin Element Properties - WebView Web
The WebView Web element is used in web applications to communicate with native mobile apps.
Fields
Title
Description
Type
Received App Type
The type of data (API call type) that will be received
Custom Type
Sent App Type
The type of data (API call type) that will be sent
Custom Type
Element Actions
Send Text
Sends text data from the web page to the native app.
Title
Description
Type
Text
Text to be sent to the native app
Text
Send Number
Sends numeric data from the web page to the native app.
Title
Description
Type
Number
Number to be sent to the native app
Number
Send Numeric Range
Sends a numeric range from the web page to the native app.
Title
Description
Type
Numeric Range
Numeric range to be sent to the native app
Number Range
Send Boolean
Sends a boolean value from the web page to the native app.
Title
Description
Type
Boolean
Boolean value to be sent to the native app
Boolean
Send Image
Sends an image from the web page to the native app.
Title
Description
Type
Image
Image to be sent to the native app
Image
Send File
Sends a file from the web page to the native app.
Title
Description
Type
File
File to be sent to the native app
File
Send Address
Sends a geographic address from the web page to the native app.
Title
Description
Type
Address
Geographic address to be sent to the native app
Geographic Address
Send Date
Sends a date from the web page to the native app.
Title
Description
Type
Date
Date to be sent to the native app
Date
Send Date Range
Sends a date range from the web page to the native app.
Title
Description
Type
Date Range
Date range to be sent to the native app
Date Range
Send User
Sends a user from the web page to the native app.
Title
Description
Type
User uid
Configure with User’s ID
Text
Send App Type
Sends a custom app type from the web page to the native app.
Title
Description
Type
App Type
Custom app type to be sent to the native app
Custom Data
Exposed states
Name
Description
Type
is react native
Yes when page is opened in React Native
Boolean
received text
Received text from Native
Text
received number
Received number from Native
Number
received numeric range
Received numeric range from Native
Number Range
received boolean
Received boolean from Native
Boolean
received image
Received image from Native
Image
received file
Received file from Native
File
received geographic address
Received geographic address from Native
Geographic Address
received date
Received date from Native
Date
received date range
Received date range from Native
Date Range
received user
Received user from Native
User
received app type
Received app type from Native
Custom Data
received unknown
Received unknown from Native
Text
Element Events
Name
Description
received text
Triggers after receiving text from Native
received number
Triggers after receiving number from Native
received numeric range
Triggers after receiving numeric range from Native
received boolean
Triggers after receiving boolean from Native
received image
Triggers after receiving image from Native
received file
Triggers after receiving file from Native
received geographic address
Triggers after receiving geographic address from Native
