Realtime in Webflow
Realtime is in beta, and this documentation can change at any time.
Getting Started
Make sure you've reviewed the Realtime documentation here, as it is helpful to understand the process and how to use the Xano SDK before continuing.
You need to be comfortable adding and modifying custom code in your Webflow project.
Building a Live Chat in Webflow (Example)
Head to your Site Settings.

In the Custom Code section, paste the following line of code. This loads the Xano SDK and enables us to use it in the rest of our project. It also defines our 'xanoClient', which we'll call in our separate pages to enable Realtime functionality. Make sure to place your API group base URL and realtime connection hash in the appropriate places, and click Save.
If you prefer, you can change the variable name const
xanoClient
to something else. Please note that any of our examples here will continue to use xanoClient
, and you'll need to update them accordingly.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@xano/js-sdk@latest/dist/xano.min.js"></script>
<script type="text/javascript">
const xanoClient = new XanoClient({
apiGroupBaseUrl: 'YOUR BASE URL HERE',
realtimeConnectionHash: 'YOUR REALTIME CONNECTION HASH HERE',
});
</script>

Head back to the Designer, and we can start building realtime functionality into our project.
For this example, we've set up a simple chat application, similar to the example prepared in the main Realtime documentation.

We know that we want this page to connect to a specific channel, so let's head to our page settings and add some custom code.
<script type="text/javascript">
const marvelChannel = xanoClient.channel("marvel-chat-room");
marvelChannel.on((message) => {
switch (message.action) {
case 'message':
messageReceived(message.body);
break;
default:
console.info(message);
}
});
</script>
This piece of code, placed in the 'before </body> tag' section, tells the page that we want to connect to the marvel-chat-room channel and listen for messages. Any time we receive a new message, we want to execute another function called messageReceived, which will handle rendering the new message on the page.
Now that we've set up actually connecting to the realtime server, we can start working with our messages. This is an example code snippet that lives right above our </body> tag to render new messages on the page.
function messageReceived(payload) {
const messageDiv = document.createElement("div");
messageDiv.classList.add("message");
const messageText = document.createElement("div");
messageText.classList.add("message-text");
messageText.textContent = payload;
messageDiv.appendChild(messageText);
messageDiv.style.display = 'block';
const chatboxes = document.getElementsByClassName("chatbox");
for (const chatbox of chatboxes) {
chatbox.appendChild(messageDiv);
}
}
We're almost there. The last thing we need to do is add the ability to send new messages.
function sendMessage() {
const message = document.getElementById("messageInput").value;
marvelChannel.message(message);
document.getElementById("messageInput").value = "";
}
document.getElementById("sendButton").addEventListener("click", sendMessage);
And with that, you've just built live chat in your Webflow site. Publish your changes and check it out!
View the sample Webflow project here.
You'll want to clone this project so you can fill in your API group base URL and connection hash in the site settings.
Last updated
Was this helpful?