How to integrate SignalR in Bubble

To integrate SignalR in Bubble, you cannot use Bubble’s built‑in features directly because Bubble does not support WebSockets (which SignalR uses). The only working way today is to put a small custom HTML/JavaScript block on the page that connects to your SignalR hub, listens for messages, and then triggers Bubble events using Bubble’s “window.trigger” event bridge. SignalR runs entirely in the browser; Bubble just reacts to the messages.

The Realistic Approach That Works

You add an HTML element with custom JS that:

• loads Microsoft’s SignalR JavaScript client
• creates a connection to your SignalR hub URL
• listens for events from SignalR
• fires a Bubble event when data arrives so you can run workflows

This is the same pattern used for Pusher, Ably, and other WebSocket services in Bubble.

Step-by-Step Explanation

In your Bubble page:

• Drag an HTML element onto the page
• Paste the code below (replace the hub URL and event name)
• Use Bubble’s “When a custom event is triggered (JavaScript to Bubble)” workflow to handle incoming data

<!-- Load SignalR client -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js"></script>

<script>
// Connect to your SignalR Hub
const connection = new signalR.HubConnectionBuilder()
    .withUrl("https://YOUR_DOMAIN/hubname") // your hub URL
    .withAutomaticReconnect()
    .build();

// Start connection
connection.start().catch(err => console.error(err.toString()));

// Listen to a message type from SignalR
connection.on("newMessage", (data) => {
    // Send data into Bubble
    window.dispatchEvent(new CustomEvent("signalr_message", { detail: data }));
});
</script>

Handle the Event Inside Bubble

On the page, add a “When Page is loaded” workflow and use Toolbox’s “Add event listener” action (or your own JS) to catch the event:

// This listens to the SignalR event and exposes it to Bubble
window.addEventListener("signalr_message", function(e){
    bubble_fn_signalr(e.detail); // Calls Bubble's exposed function
});

Then create the matching Bubble exposed function using Toolbox plugin’s “Run JavaScript (expose function)” feature.

• This lets you trigger workflows
• Store the message in the database
• Update repeating groups in real time

This is the only reliable way to integrate SignalR with Bubble right now because SignalR depends on WebSockets, which Bubble does not handle natively. The browser-side JS bridge is the correct and production‑safe solution.