Bubble.io Integration

Integrate real-time messaging into your Bubble.io application using CloudSignal.

Overview

CloudSignal provides a native Bubble plugin and CDN option for no-code integration.

Option 1: CloudSignal Bubble Plugin

The easiest way to add real-time features to your Bubble app.

Installation

1. Go to Plugins in your Bubble editor
2. Click Add plugins
3. Search for "CloudSignal"
4. Click Install

Configuration

1. Go to Plugins → CloudSignal
2. Enter your Organization ID
3. (Optional) Add API Key for token auth

Actions

The plugin provides these workflow actions:

Connect

• Establishes connection to CloudSignal
• Use on page load or after user login

Subscribe to Topic

• Topic pattern (supports wildcards)
• Stores messages in a custom state

Publish Message

• Topic to publish to
• Message content (text or JSON)

Disconnect

• Gracefully disconnects

Events

Listen for these events in workflows:

• CloudSignal Connected - Connection established
• CloudSignal Message Received - New message arrived
• CloudSignal Disconnected - Connection lost
• CloudSignal Error - Error occurred

Example: Real-Time Chat

Page Load Workflow:

1. CloudSignal → Connect
2. CloudSignal → Subscribe to "chat/room/general"

Send Button Workflow:

1. CloudSignal → Publish to "chat/room/general"
   • Message: {"user": "Current User's Name", "text": "Input Chat's value"}

When CloudSignal Message Received:

1. Create a new Chat Message (your data type)
2. Set user = Received Message's user
3. Set text = Received Message's text

Option 2: CDN with HTML Element

For more control, use the CDN directly.

Add Script to Page

1. Add an HTML element to your page
2. Paste this code:

<script src="https://cdn.cloudsignal.io/cloudsignal-mqtt.v2.1.0.js"></script>
<script>
// Initialize client
window.csClient = new CloudSignal({
  organizationId: 'your-org-id'
});

// Connect
csClient.connect().then(() => {
  console.log('CloudSignal connected');
  
  // Subscribe to topics
  csClient.subscribe('notifications', (message) => {
    // Trigger Bubble event
    bubble_fn_onNotification(message);
  });
});

// Function to publish from Bubble
window.sendCloudSignalMessage = function(topic, payload) {
  if (csClient && csClient.isConnected()) {
    csClient.publish(topic, JSON.parse(payload));
    return true;
  }
  return false;
};
</script>

Expose Functions to Bubble

1. Go to Settings → General
2. Enable Expose option to add an ID attribute to HTML elements
3. Add JavaScript-to-Bubble elements for callbacks

Call from Workflow

Use Run JavaScript action:

sendCloudSignalMessage('chat/messages', JSON.stringify({
  user: 'Current User's Name',
  text: 'Input's value',
  timestamp: Date.now()
}));

Authentication with Bubble Users

Using Tokens (Recommended)

Set up a backend workflow to generate tokens:

1. Create an API workflow "generate-mqtt-token"
2. Call CloudSignal API to get token
3. Return token to client

<script>
// After user login
async function connectWithAuth() {
  // Call your backend workflow
  const response = await fetch('/api/1.1/wf/generate-mqtt-token', {
    method: 'POST',
    headers: { 'Authorization': 'Bearer ' + getCurrentUserToken() }
  });
  const { token } = await response.json();
  
  window.csClient = new CloudSignal({
    organizationId: 'your-org-id',
    auth: {
      enabled: true,
      token: token
    }
  });
  
  await csClient.connect();
}
</script>

Common Use Cases

Live Activity Feed

<script>
csClient.subscribe('activity/org/' + orgId, (activity) => {
  // Call Bubble function to add to repeating group
  bubble_fn_addActivity(JSON.stringify(activity));
});
</script>

Order Status Updates

<script>
csClient.subscribe('orders/' + orderId + '/status', (update) => {
  // Update order status in Bubble
  bubble_fn_updateOrderStatus(update.status);
});
</script>

Typing Indicators

<script>
// Send typing status
window.sendTyping = function(chatId, isTyping) {
  csClient.publish('chat/' + chatId + '/typing', {
    user: currentUserId,
    typing: isTyping
  });
};

// Receive typing status
csClient.subscribe('chat/' + chatId + '/typing', (data) => {
  if (data.user !== currentUserId) {
    bubble_fn_showTyping(data.typing);
  }
});
</script>

Troubleshooting

Connection Issues

• Check Organization ID is correct
• Verify domain is whitelisted in CloudSignal dashboard
• Check browser console for errors

Messages Not Arriving

• Confirm topic patterns match
• Check subscription was created after connect()
• Verify publisher and subscriber use same topic

Plugin Not Working

• Clear browser cache
• Check plugin is latest version
• Ensure workflows are in correct order (connect before subscribe)