Articles on: White Labeling & Embedding

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


  1. Navigate to the Settings page in your BlazeSQL dashboard
  2. Locate the "White-labeling" section
  3. Toggle on "Theme editor mode"
  4. Set dark/light mode at the top right of the settings page
  5. 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


The white labeling editor mode can be activated in the settings paged then...


Adjust the white labeling parameters and click save


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


Preview of the above code snippet


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:


  1. Verify your API key is valid and active
  2. Check network requests for any API errors
  3. Ensure your subscription includes white labeling capabilities
  4. Contact support if problems persist


For additional assistance, please contact BlazeSQL support.

Updated on: 28/05/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!