table {
  width: 100%;
  max-width: 100%; /* Ensures the table takes up the full width of its container */
  border-collapse: collapse; /* Collapses borders between cells */
  table-layout: auto; /* Allows column widths to adjust based on content */
  margin-bottom: 20px; /* Adds space between tables */
  border: none; /* Removes outer border */
}

/* Style table headers */
th {
  text-align: left; /* Aligns header text to the left */
  padding-left: 20px; /* Adds more left padding to header cells */
  padding-top: 12px; /* Adds top padding for better spacing */
  padding-bottom: 12px; /* Adds bottom padding for better spacing */
  border-right: 1px solid #ddd; /* Adds right border between cells */
  font-weight: bold; /* Makes header text bold */
  word-wrap: break-word; /* Ensures long words wrap */
}

/* Style table cells */
td {
  padding-left: 20px; /* Adds more left padding inside table cells */
  padding-top: 12px; /* Adds top padding inside table cells */
  padding-bottom: 12px; /* Adds bottom padding */
  border-top: 1px solid #ddd; /* Adds top border between cells */
  border-right: 1px solid #ddd; /* Adds right border between cells */
  white-space: normal; /* Allows text to wrap */
  word-wrap: break-word; /* Ensures long words wrap */
  vertical-align: middle; /* Aligns text vertically in the middle */
}

/* Ensure links inside table cells are styled properly */
td a {
  color: #0066cc; /* Change link color to blue */
  text-decoration: none; /* Removes underline from links */
}

td a:hover {
  color: #004a99; /* Darkens color when hovered */
}

/* Remove right border for rightmost column (if needed) */
table tr td:last-child {
  border-right: none; /* Removes the right border for the last cell in each row */
}

table tr th:last-child {
  border-right: none; /* Removes the right border for the last header in each row */
}

.icon-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .custom-icon {
    width: 24px;
    height: 24px;
  }
  
  .inline-link {
    display: inline-flex;
    align-items: center;
    color: #007bff; /* Original link color */
    margin-top: 10px;
    text-decoration: none; /* Removes underline from links */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth hover effect */
  }
  
  .inline-link:hover {
    color: #030f1c; /* Slightly darker shade for hover */
  }
  
  
  .centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 500px;  /* Adjust as needed */
    height: auto;
  }


  .centered-video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  .inline-link Icon {
    margin-right: 5px;
  }
  
  .icon-group .icon {
    width: 20px;
    height: 20px;
    display: inline-block; /* Ensures proper flow */
    vertical-align: middle; /* Aligns icons with text */
  }

  .icon-group a {
    display: inline-block;
  }
  
  
  .icon-group img,
  .icon-group svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
  pointer-events: none;
  }
  .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff; /* Optional for clarity */
    border-radius: 8px; /* Optional for rounded corners */
    padding: 16px;
  }
  

  

  .card:hover {
    transform: translateY(-5px); /* Slight upward movement */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
  }



/* Button: Custom button styles */
.button {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}

.button:hover {
  background-color: #0056b3;
}

.warning {
  background-color: red !important;
}


  
  

  

Simple chat samples with all the features essential for a seamless and up-to-date messaging experience based on QuickBlox API.

Chat UI Kit samples

QuickBlox

QuickBlox Documentation

QuickBlox provides powerful Chat API and SDK to add real-time messaging and video calls to your web and mobile apps. Learn how to integrate QuickBlox across multiple platforms.

Learn about QuickBlox platform features and documentation guidelines.

Introduction

Learn about basic QuickBlox concepts to simplify the integration with QuickBlox.

Key Concepts

Glossary

Sign Up

Application

Learn how to manage your users with QuickBlox.

Users

Learn how to manage dialogs and messages.

Chat

Learn how to store and access files with QuickBlox file storage.

Content

Learn how to store and sync data with QuickBlox key-value storage.

Custom Objects

Learn how to export data from the Dashboard.

Data Export

The AI Extensions module allows you to offer your users the latest and most diverse functionality almost effortlessly using QuickBlox API.

AI Extensions

Learn how to moderate messages and users in your app.

Chat Moderation

Learn how to easily integrate your existing user base into QuickBlox.

Custom Identity Provider

QuickBlox API is comprised of different web resources representing data associated with chat activities. You can directly interact with these resources via dedicated actions over standard HTTP protocols.

Overview

The purpose of the **rate limit** is to ensure a high quality of QuickBlox service across all QuickBlox accounts, by limiting the number of API requests that an account can produce per second.

Limits

Errors

Retrieve correct API endpoints for account.

Get Account Settings

Use our pre-built UI elements to create a chat interface quickly and easily.

Send your first message

Quickblox UI Kit for iOS provides an extensive range of features to enhance the chat experience within applications.

Features

QuickBloxUIKit comes with a range of AI features that enhance the capabilities of your chat application.

AI Features

QuickBlox IOS UIKit provides customizable screens and basic chat features such as dialog list, dialog creation, chat in dialogs, and dialog editing out of the box.

Screens

The QuickBlox UIKit for iOS allows you to create your own unique view of the UIKit.

Customization

QuickBlox UIKit for Android provides a range of features to enhance the chat experience.

QuickBlox AI for Android provides a range of features to enhance the chat experience.

QuickBlox Android UIKit allows you to create customizable screens and execute main chat functions such as list dialogs, create dialogs, and chat in dialogs.

The QuickBlox UIKit for Android allows you to create your own unique view of the UIKit.

The **QuickBlox React Chat UIKit** is a set of ready-made components and tools for developing functional and powerful chat features in React applications.

AI Features base on OpenAI GPT and Quickblox SmartChat Assistant

Core components play a crucial role in UIKit for React.

Core components

QuickBlox React Chat UIKit provides customizable screen modules and essential chat functions such as a list of dialogs, dialog creation, in-dialog chat, and dialog editing out of the box.

Screen modules

Storybook

UIKit

Learn how to add QuickBlox to your app and send your first message.

Learn how to install QuickBlox SDK and send your first message.

Quick Start

Learn how to add and configure QuickBlox SDK for your app.

Setup

Learn how to authenticate your users with QuickBlox.

Authentication

Learn how to add video conference calls to your app.

Video Conference

Learn how to send push notifications to users when they are offline.

Push Notifications

Learn how to store and sync the phone contact list with QuickBlox.

Address Book

SDK Reference

Use this page to learn how to send push notifications to users when they are offline.

Use this page to learn how to authenticate your users with QuickBlox.

This page displays a collection of QuickBlox code samples in different programming languages.

Chat Samples

Choose the code sample below and head to GitHub repositories to explore and clone it. Go over the relevant documentation for more details.

Chatbot samples

Developer-friendly push notifications samples that allow you to immediately deliver some information to a user's device when the device is either idle or running the app in the background, built for web and mobile platforms. 

Push notification samples

Feature-rich video calling samples that allow you to make high-quality voice and video calls, built for web and mobile platforms.

Video calling samples

Simple and feature-rich video conference samples that enable you to easily implement a conference with more than ten people, build for web and mobile platforms.

Video conference samples

Here you will find how to use SmartChat Assistant in your aplication

How To Use

The QuickBlox UIKit for iOS is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications.

The main goal of the QuickBlox UIKit for Android is to offer developers a streamlined and efficient way to implement chat functionality within their Android applications.

The **QuickBlox UIKit for Android** comprises a collection of pre-assembled UI components that enable the effortless creation of an in-app chat equipped with all the necessary messaging functionalities.

The main goal of the QuickBlox UIKit for React is to offer developers a streamlined and efficient way to implement chat functionality within their React Web applications.

The QuickBlox UIKit for React comprises a collection of pre-assembled UI components that enable effortless creation of an in-app chat equipped with all the necessary messaging functionalities.

The QuickBlox UIKit for React allows you to create your own unique view of the UIKit.

Learn how to enable chat functionality for your app.

Learn how to connect to the chat server and set connection settings.

Connection

Dialogs

Learn how to send and receive messages, mark messages as delivered or read, etc.

Messaging

Learn how to track user presence updates and check user status using ping.

User Presence

Learn how to receive push notifications when the app is not running.

Offline Messaging

Learn how to create, update, manage, and add users to your contact list.

Contact List

Learn how to create privacy lists and implement user-to-user blocks.

Privacy List

Learn how to add peer-to-peer video calls to your app.

Video Calling

Learn how to mute audio, disable video,  switch camera, share your screen, configure media settings, etc.

Advanced

Learn how to mute audio, disable video,  switch camera and audio output, etc.

Learn how to mute audio and disable video.

Code Samples

Chat UI Kit samples

Chat UI Kit SwiftUI Sample

React Chat UI Kit Sample App

Android UI Kit Sample