# How to integrate SignalR in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Set up real-time communication in your Bubble app by connecting to a SignalR hub using custom JavaScript. This tutorial shows you how to load the SignalR client library, connect to an external SignalR hub, receive push messages, and update your Bubble UI in real-time — bridging the gap between Bubble's no-code environment and SignalR's real-time protocol.

## Overview: Setting Up SignalR in Bubble

SignalR is a Microsoft library for adding real-time web functionality to applications — enabling server-to-client push notifications without polling. While Bubble has built-in real-time database updates, sometimes you need to connect to an external service that uses SignalR (like a .NET backend or Azure service). This tutorial shows you how to bridge SignalR and Bubble using JavaScript in HTML elements and the Toolbox plugin.

## Before you start

- A Bubble account with an app
- An external SignalR hub URL to connect to (from your .NET backend or Azure SignalR Service)
- The Toolbox plugin installed in your Bubble app
- Basic understanding of what real-time communication means (server pushes data to client without refresh)

## Step-by-step guide

### 1. Load the SignalR JavaScript client library

Go to Settings → SEO / metatags and add the SignalR client library in the 'Script/meta tags in header' section. Add: <script src='https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.0/signalr.min.js'></script>. This loads the SignalR client on every page. Alternatively, if only one page needs SignalR, add an HTML element on that page with the same script tag. The library provides the signalR global object that you will use to create hub connections.

> Pro tip: Check cdnjs.com for the latest SignalR client version to ensure compatibility with your hub server.

**Expected result:** The SignalR JavaScript client library is available globally in your Bubble app.

### 2. Set up the Toolbox plugin for JavaScript-to-Bubble communication

Go to the Plugins tab and install the Toolbox plugin if you have not already. On your page in the Design tab, drag a 'JavaScript to Bubble' element from the element palette. In its properties, add an output value called incoming_message of type text. This element creates a bridge — your JavaScript code will call bubble_fn_incoming_message('data') to send data from SignalR into Bubble. You can then reference this element's incoming_message value in workflows and conditions.

**Expected result:** A JavaScript to Bubble element is on your page with an incoming_message output that Bubble can read.

### 3. Connect to the SignalR hub with JavaScript

Add an HTML element to your page with the SignalR connection code. Inside <script> tags, create a new HubConnectionBuilder pointing to your SignalR hub URL, configure automatic reconnection, and start the connection. Register a handler for the method name your hub uses to send messages (e.g., 'ReceiveMessage'). In the handler, call the Toolbox plugin's bridge function to pass the message data to Bubble.

```
<script>
  var connection = new signalR.HubConnectionBuilder()
    .withUrl('https://your-server.com/myhub')
    .withAutomaticReconnect()
    .build();

  connection.on('ReceiveMessage', function(user, message) {
    // Pass incoming message to Bubble via Toolbox
    bubble_fn_incoming_message(JSON.stringify({
      user: user,
      message: message,
      timestamp: new Date().toISOString()
    }));
  });

  connection.start()
    .then(function() {
      console.log('SignalR connected');
    })
    .catch(function(err) {
      console.error('SignalR connection error: ', err);
    });
</script>
```

**Expected result:** Your Bubble app connects to the SignalR hub and listens for incoming messages.

### 4. Display real-time messages in the Bubble UI

Create a Custom State on the page called messages of type text (list). Add a 'Do when condition is true' event that watches the JavaScript to Bubble element's incoming_message value. Set it to trigger every time the value changes. In the workflow actions: parse the JSON message (using the Toolbox plugin's expression or a JavaScript action), then Set state of page → messages = page's messages plus item [parsed message text]. Display messages in a Repeating Group with Type: text, Data source: page's messages. Each cell shows the message content. New messages appear instantly as SignalR pushes them.

> Pro tip: Limit the messages list to the last 50-100 items to prevent memory issues. Use :items until # to trim the list.

**Expected result:** Incoming SignalR messages appear in the UI in real-time without any page refresh.

### 5. Send messages back to the SignalR hub

To send messages from Bubble to the SignalR hub, add a text Input and Send button on your page. In the HTML element's script, add a global function that invokes a hub method. Create a workflow on the Send button: use the Toolbox plugin's 'Run javascript' action to call the send function with the input value. The hub receives the message and can broadcast it to other connected clients.

```
<script>
  // Add this to your existing connection script
  window.sendSignalRMessage = function(message) {
    connection.invoke('SendMessage', 'BubbleUser', message)
      .catch(function(err) {
        console.error('Send error: ', err);
      });
  };
</script>
```

> Pro tip: For production applications that need bidirectional real-time communication with external SignalR services, RapidDev can help architect a reliable bridge that handles reconnection, authentication, and message queuing.

**Expected result:** Users can send messages from the Bubble UI to the SignalR hub, enabling two-way real-time communication.

## Complete code example

File: `Workflow summary`

```text
SIGNALR IN BUBBLE — WORKFLOW SUMMARY
======================================

SETUP:
  1. Load SignalR library: Settings → Header script OR HTML element
     <script src='https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.0/signalr.min.js'></script>

  2. Install Toolbox plugin
  3. Add JavaScript to Bubble element with output: incoming_message (text)

HTML ELEMENT — CONNECTION SCRIPT:
  - Create HubConnectionBuilder with hub URL
  - Enable withAutomaticReconnect()
  - Register message handler: connection.on('ReceiveMessage', ...)
  - Handler calls bubble_fn_incoming_message(data)
  - Start connection: connection.start()
  - Add send function: window.sendSignalRMessage(msg)

CUSTOM STATES:
  messages (list of text) — stores received messages

WORKFLOW: Do when incoming_message changes
  (Run every time)
  1. Parse incoming JSON message
  2. Set state → messages = messages + new message

WORKFLOW: Send button clicked
  1. Run javascript: sendSignalRMessage(Input's value)
  2. Clear Input value

UI ELEMENTS:
  Repeating Group → Type: text, Source: page's messages
  Each cell: Text element showing the message
  Input + Send button for outgoing messages

ERROR HANDLING:
  connection.onreconnecting → show 'Reconnecting...' indicator
  connection.onreconnected → hide indicator
  connection.onclose → show 'Disconnected' warning
```

## Common mistakes

- **Forgetting to load the SignalR library before the connection script runs** — If the signalR global object is not defined when your connection script runs, you get a 'signalR is not defined' error. Fix: Load the SignalR CDN script in the page header (Settings → SEO) or in a separate HTML element placed above the connection script element.
- **Not handling reconnection after network interruptions** — Without automatic reconnection, a brief network drop permanently disconnects the client. Fix: Use .withAutomaticReconnect() when building the connection. Also add onreconnecting and onclose handlers to show connection status to users.
- **Using the wrong method name in connection.on()** — The method name must exactly match what the server hub uses in Clients.All.SendAsync('MethodName'). A mismatch means messages are silently dropped. Fix: Verify the exact method name with your SignalR server documentation or developer.

## Best practices

- Use withAutomaticReconnect() to handle temporary network interruptions gracefully
- Show a connection status indicator (connected, reconnecting, disconnected) to users
- Limit stored messages to prevent browser memory issues on long-running sessions
- Parse and validate incoming messages before displaying them in the UI
- Use the Toolbox plugin's JavaScript to Bubble element as the bridge between JS and Bubble
- Test the connection with your SignalR server in development before deploying to live

## Frequently asked questions

### Can Bubble connect to SignalR natively without JavaScript?

No. Bubble does not have built-in SignalR support. You need JavaScript in an HTML element and the Toolbox plugin to bridge SignalR messages into Bubble's visual environment.

### Does SignalR use WebSockets?

SignalR uses WebSockets as its primary transport but automatically falls back to Server-Sent Events or long polling if WebSockets are not available. The client library handles this transparently.

### Will SignalR messages work when the Bubble app is published?

Yes, as long as your SignalR server allows connections from your Bubble app's domain. You may need to configure CORS on the SignalR server to allow your Bubble app URL.

### How do I authenticate the SignalR connection?

Pass an access token in the connection builder: .withUrl('hub-url', { accessTokenFactory: () => 'your-token' }). You can get the token from a Bubble Custom State or API call.

### Can I use Azure SignalR Service with Bubble?

Yes. Azure SignalR Service provides a hosted SignalR hub. Use the negotiate endpoint URL in your HubConnectionBuilder. The JavaScript client handles the Azure-specific connection flow automatically.

### What if I need a fully managed real-time solution without custom JavaScript?

Bubble's built-in database provides real-time updates for data changes. For external real-time needs, RapidDev can help architect a solution using webhooks, backend workflows, or a managed real-time service connected to your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-a-signalr-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-a-signalr-feature-in-bubble