Xano Documentation
  • 👋Welcome to Xano!
  • 🌟Frequently Asked Questions
  • 🔐Security & Compliance (Trust Center)
  • 🙏Feature Requests
  • 💔Known Issues
  • Before You Begin
    • Using These Docs
    • Where should I start?
    • Set Up a Free Xano Account
    • Key Concepts
    • The Development Life Cycle
    • Navigating Xano
    • Plans & Pricing
  • The Database
    • Designing your Database
    • Database Basics
      • Using the Xano Database
      • Field Types
      • Relationships
      • Database Views
      • Export and Sharing
      • Data Sources
    • Migrating your Data
      • Airtable to Xano
      • Supabase to Xano
      • CSV Import & Export
    • Database Performance and Maintenance
      • Storage
      • Indexing
      • Maintenance
      • Schema Versioning
  • 🛠️The Function Stack
    • Building with Visual Development
      • APIs
        • Swagger (OpenAPI Documentation)
      • Custom Functions
        • Async Functions
      • Background Tasks
      • Triggers
      • Middleware
      • Configuring Expressions
      • Working with Data
    • Functions
      • AI Tools
      • Database Requests
        • Query All Records
          • External Filtering Examples
        • Get Record
        • Add Record
        • Edit Record
        • Add or Edit Record
        • Patch Record
        • Delete Record
        • Bulk Operations
        • Database Transaction
        • External Database Query
        • Direct Database Query
        • Get Database Schema
      • Data Manipulation
        • Create Variable
        • Update Variable
        • Conditional
        • Switch
        • Loops
        • Math
        • Arrays
        • Objects
        • Text
      • Security
      • APIs & Lambdas
        • Realtime Functions
        • External API Request
        • Lambda Functions
      • Data Caching (Redis)
      • Custom Functions
      • Utility Functions
      • File Storage
      • Cloud Services
    • Filters
      • Manipulation
      • Math
      • Timestamp
      • Text
      • Array
      • Transform
      • Conversion
      • Comparison
      • Security
    • Data Types
      • Text
      • Expression
      • Array
      • Object
      • Integer
      • Decimal
      • Boolean
      • Timestamp
      • Null
    • Environment Variables
    • Additional Features
      • Response Caching
  • Testing and Debugging
    • Testing and Debugging Function Stacks
    • Unit Tests
    • Test Suites
  • CI/CD
  • File Storage
    • File Storage in Xano
    • Private File Storage
  • Realtime
    • Realtime in Xano
    • Channel Permissions
    • Realtime in Webflow
  • Maintenance, Monitoring, and Logging
    • Statement Explorer
    • Request History
    • Instance Dashboard
      • Memory Usage
  • Building Backend Features
    • User Authentication & User Data
      • Separating User Data
      • Restricting Access (RBAC)
      • OAuth (SSO)
    • Webhooks
    • Messaging
    • Emails
    • Custom Report Generation
    • Fuzzy Search
    • Chatbots
  • Xano Features
    • Snippets
    • Instance Settings
      • Release Track Preferences
      • Static IP (Outgoing)
      • Change Server Region
      • Direct Database Connector
      • Backup and Restore
      • Security Policy
    • Advanced Back-end Features
      • Xano Link
      • Developer API (Deprecated)
    • Metadata API
      • Master Metadata API
      • Tables and Schema
      • Content
      • Search
      • File
      • Request History
      • Workspace Import and Export
      • Token Scopes Reference
  • Xano AI
    • Building a Backend Using AI
    • Get Started Assistant
    • AI Database Assistant
    • AI Lambda Assistant
    • AI SQL Assistant
    • API Request Assistant
    • Template Engine
    • Streaming APIs
  • AI Tools
    • MCP Servers
      • Connecting Clients
      • MCP Functions
  • Xano Transform
    • Using Xano Transform
  • Xano Actions
    • What are Actions?
    • Browse Actions
  • Team Collaboration
    • Realtime Collaboration
    • Managing Team Members
    • Branching & Merging
    • Role-based Access Control (RBAC)
  • Agencies
    • Xano for Agencies
    • Agency Features
      • Agency Dashboard
      • Client Invite
      • Transfer Ownership
      • Agency Profile
      • Commission
      • Private Marketplace
  • Enterprise
    • Xano for Enterprise
    • Enterprise Features
      • Microservices
      • Tenant Center
      • Compliance Center
      • Security Policy
      • Instance Activity
      • Deployment
      • RBAC (Role-based Access Control)
      • Xano Link
  • Your Xano Account
    • Account Page
    • Billing
    • Referrals & Commissions
  • Troubleshooting & Support
    • Error Reference
    • Troubleshooting Performance
      • When a single workflow feels slow
      • When everything feels slow
      • RAM Usage
      • Function Stack Performance
    • Getting Help
      • Granting Access
      • Community Code of Conduct
      • Community Content Modification Policy
  • Special Pricing
    • Students & Education
    • Non-Profits
  • Security
    • Best Practices
Powered by GitBook
On this page
  • Getting Started
  • Building a Live Chat in Webflow (Example)
  • View the sample Webflow project here.

Was this helpful?

  1. Realtime

Realtime in Webflow

Last updated 3 months ago

Was this helpful?

Realtime is in beta, and this documentation can change at any time.

Getting Started

  • Make sure you've reviewed the Realtime documentation , 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>

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.

<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>

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...

  1. Create an element on our page to serve as a template, and assign it a class.

  2. Once you have styled the element to your liking, give it a subclass. Change the properties of the subclass to set Display to None.

  3. 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.

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);
  }
}
Code Explanation

In this code, we start by defining our function and the data it needs to run.

function messageReceived(payload) {

We then define a couple of variables, messageDiv and messageText, targeting newly created div elements to contain our message. We're also applying some styling to the message block to make sure it displays.

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';

In the final section, we look for the element on our page with the class of 'chatbox' and place the new div inside of it.

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);
Code Explanation

First, we define a new function called sendMessage that is triggered every time we need to send a new message to the channel.

function sendMessage() {

Inside of this function, we define our message as the value of our input.

const message = document.getElementById("messageInput").value;

We can then send our message to the channel, and then clear the input value to prepare for a new message.

     marvelChannel.message(message);
      document.getElementById("messageInput").value = "";
    }

The last line of the code adds an event listener to our sendButton. This makes sure that every time the button is clicked, the function is executed.

  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!

You'll want to clone this project so you can fill in your API group base URL and connection hash in the site settings.

View the sample Webflow project .

here
here