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.

Before you start, make sure you have:

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

To customize the appearance with the 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
Other branding elements
Dark Mode (from the settings page)

Then, save your changes

The white labeling editor mode can be activated in the settings page

en...

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"
  allow="clipboard-read; clipboard-write"
></iframe>

Note: For clipboard functionality to work properly, you must include clipboard permissions in the iframe's allow attribute.

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>
        <a id="tab-home">Home</a>
        <a id="tab-datachat">Data Chat</a>
        <a id="tab-settings">Settings</a>
    </div>

    <div id="home">
        <div>
            <h2>Home</h2>
            <p>Welcome to the dashboard</p>
        </div>
    </div>

    <div id="datachat">
        <!-- 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"
          allow="clipboard-read; clipboard-write"
        ></iframe> 
    </div>

    <div id="settings">
        <div>
            <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.