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
d 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_api
Parameters:
api_key
: Your API authentication keyuser_email
: Email address of the userhide_sidebar
: (Optional) Set totrue
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 totrue
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!