WebSync for Bubble Mobile

Demo to preview the plugin:

Introduction

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.
Image without caption

How to setup

To set up the WebSync for Bubble Mobile plugin, follow these steps:
  1. Insert the ‘WebView Native’ element from the plugin section into your page in the Bubble editor for native (mobile) applications.
  1. Set the initial URL to your webpage in the WebView Native properties.
    1. Image without caption
  1. Insert the ‘WebView Web’ element into your web page for web applications.
    1. Image without caption
  1. 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.
    1. Image without caption
  1. Track received data via the ‘Received [Data Type]’ state (e.g., ‘Received Text’) or by listening for the ‘received [data_type]’ event in workflows.
    1. Image without caption

Plugin Element Properties

This plugin provides two visual elements that facilitate communication between web and native environments.

WebView Native

WebView Web

Image without caption

Changelogs