Embedding & White Labeling
BlazeSQL Embedding & White Labeling Guide
Overview
White labeling in BlazeSQL allows you to seamlessly integrate the BlazeSQL data chat interface into your own applications with custom branding. This page explains how to set up and configure white labeling for your BlazeSQL integration.
Prerequisites
An active BlazeSQL Team Advanced, Enterprise, or White Labeling subscription
Your API key (found in the Settings page of a team admin account under "White-labeling" - contact support if it is not available)
Implementation Process
Step 1: Customize the Appearance with Theme Editor
Navigate to the Settings page in your BlazeSQL dashboard
Locate the "White-labeling" section
Toggle on "Theme editor mode"
Set dark/light mode at the top right of the settings page
Customize the following elements:
Primary and secondary colors
Chatbot icon (must be JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, or WBMP)
Other branding elements
Dark Mode (from the settings page)
Then, save your changes
nd then...
Your API key can be found in this section as well, which you'll need for the next step.
Step 2: Generate Authentication URL
After customizing the appearance, use the authentication API to generate a session-specific URL for each end-user:
https://api.blazesql.com/user_authentication_apiParameters:
api_key: Your API authentication key
user_email: Email address of the user
hide_sidebar: (Optional) Set to true to hide the sidebar
Reference: For detailed information, visit the User Authentication & Management API documentation.
Step 3: Embed in Your Application
Once you have the authenticated URL returned by the API, embed BlazeSQL in your application using an iframe.
<iframe src="YOUR_RETURNED_AUTHENTICATED_URL_FROM_API"></iframe>Here's an example of a dummy web app with multiple tabs, with an iFrame embedding BlazeSQL in the "Data Chat" tab of the web app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlazeSQL App</title>
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.menu-bar {
background-color: #1a1a1a;
padding: 12px 24px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-sizing: border-box;
}
.menu-bar a {
color: #ffffff;
text-decoration: none;
padding: 8px 16px;
margin-right: 8px;
border-radius: 4px;
display: inline-block;
cursor: pointer;
}
.menu-bar a.active {
background-color: rgba(255,255,255,0.2);
}
.tab-content {
position: fixed;
top: 56px;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.tab-content.active {
display: block;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.blank-content {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="menu-bar">
<a onclick="showTab('home')" id="tab-home">Home</a>
<a onclick="showTab('datachat')" id="tab-datachat">Data Chat</a>
<a onclick="showTab('settings')" id="tab-settings">Settings</a>
</div>
<div id="home" class="tab-content">
<div class="blank-content">
<h2>Home</h2>
<p>Welcome to the dashboard</p>
</div>
</div>
<div id="datachat" class="tab-content">
<!-- Important: Don't directly place API calls in your HTML like this.
Instead, use server-side code to fetch the authentication URL and then
pass it to your frontend application -->
<iframe src="YOUR_RETURNED_AUTHENTICATED_URL_FROM_API"></iframe>
</div>
<div id="settings" class="tab-content">
<div class="blank-content">
<h2>Settings</h2>
<p>Settings page coming soon</p>
</div>
</div>
<script>
function showTab(tabId) {
// Hide all tabs
const tabs = document.getElementsByClassName('tab-content');
for (let tab of tabs) {
tab.classList.remove('active');
}
// Remove active class from all menu items
const menuItems = document.getElementsByClassName('menu-bar')[0].getElementsByTagName('a');
for (let item of menuItems) {
item.classList.remove('active');
}
// Show selected tab
document.getElementById(tabId).classList.add('active');
document.getElementById('tab-' + tabId).classList.add('active');
}
// Show Data Chat tab by default
showTab('datachat');
</script>
</body>
</html>
Configuration Options
When generating the authentication URL, you can include additional parameters:
hide_sidebar: Set to true to display only the chat interface without the sidebar
For complete documentation on these features, please refer to the User Authentication & Management API documentation.
User Management
You can programmatically manage users through the API, including:
Creating new users
Updating user settings
Managing database access permissions
Deleting users
For complete documentation on these features, please refer to the User Authentication & Management API documentation.
Troubleshooting
If you encounter issues with your white-labeled implementation:
Verify your API key is valid and active
Check network requests for any API errors
Ensure your subscription includes white labeling capabilities
Contact support if problems persist
For additional assistance, please contact BlazeSQL support.
Updated on: 28/05/2025
Thank you!