Realtime with Webflow
Learn how to enable realtime functionality in your Webflow project
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.
At this point, Webflow will ask you to publish your site to see the changes. Please note that you may need to view a published version of the site to verify that Realtime is enabled and working as expected.
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.
Please note that when it comes to how you want to handle realtime implementation for your specific project, your custom code and configuration may look vastly different. The code provided in this section is for demonstration purposes only. Typically when performing an action like this in Webflow, it follows a basic structure, where we...
Create an element on our page to serve as a template, and assign it a class.
Once you have styled the element to your liking, give it a subclass. Change the properties of the subclass to set Display to None.
In your custom code, when it's time to render a message, you'll need to generate a copy of the original element containing the message or other content to show.
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.
We're almost there. The last thing we need to do is add the ability to send new messages.
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