Custom Tabs

The Custom Tabs feature is a powerful tool that allows you to create fully customized tabs tailored to your agency’s unique offerings and client needs. This feature opens up a world of possibilities for enhancing your client’s dashboard experience.

Creating Custom Tabs

Access Custom Tabs

Navigate to the Custom Tabs section in your agency settings.

Add New Tab

Click the + Add Tab button to create a new custom tab.

Configure Tab Settings

For each tab, set the following:

Choose Content Type

Select between HTML (with JavaScript) or iFrame:

<!-- Your custom HTML here -->
<div id="render-div"></div>
<script>
// Your custom JavaScript here
document.getElementById("render-div").innerHTML = "<h1>Hello World!</h1>";
</script>

Preview and Save

Use the Preview button to check your tab’s appearance, then click Done to save.

Managing Custom Tabs

Visibility Toggle

Use the Always Visible switch to control tab visibility for all clients.

Reordering

Click the arrow buttons to change the tab’s position in the list.

Editing

Click the edit icon to modify an existing tab’s content or settings.

Deleting

Remove unwanted tabs using the delete button.

Use Cases and Ideas

Here are some advanced, colorful, and feature-rich examples you can copy and paste into your custom tabs to see the possibilities:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Art Generator</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        h1 {
            text-align: center;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        input, button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: none;
        }
        button {
            background-color: #6c5ce7;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #5641e5;
        }
        #result {
            margin-top: 20px;
            text-align: center;
        }
        #generatedImage {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 AI Art Generator</h1>
        <input type="text" id="prompt" placeholder="Enter your art prompt">
        <button onclick="generateArt()">Generate Art</button>
        <div id="result"></div>
    </div>

    <script>
        function generateArt() {
            const prompt = document.getElementById('prompt').value;
            const result = document.getElementById('result');
            result.innerHTML = 'Generating your masterpiece...';
            
            // Simulating API call to an AI art generation service
            setTimeout(() => {
                const imageUrl = `https://picsum.photos/800/600?random=${Math.random()}`;
                result.innerHTML = `
                    <h3>Your AI-generated art:</h3>
                    <img id="generatedImage" src="${imageUrl}" alt="AI-generated art">
                `;
            }, 2000);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Dashboard Analytics</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            min-height: 100vh;
        }
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        }
        h2 {
            color: #333;
            margin-top: 0;
        }
        .metric {
            font-size: 2em;
            font-weight: bold;
            color: #4a4a4a;
        }
        canvas {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="card">
            <h2>Total Users</h2>
            <div class="metric" id="totalUsers">Loading...</div>
        </div>
        <div class="card">
            <h2>Revenue</h2>
            <div class="metric" id="revenue">Loading...</div>
        </div>
        <div class="card">
            <h2>User Growth</h2>
            <canvas id="userGrowthChart"></canvas>
        </div>
        <div class="card">
            <h2>Platform Usage</h2>
            <canvas id="platformUsageChart"></canvas>
        </div>
    </div>

    <script>
        // Simulated data fetching and chart rendering
        setTimeout(() => {
            document.getElementById('totalUsers').textContent = '1,234,567';
            document.getElementById('revenue').textContent = '$9,876,543';

            new Chart(document.getElementById('userGrowthChart'), {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'User Growth',
                        data: [1000, 1500, 2000, 3000, 4000, 5000],
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    }]
                }
            });

            new Chart(document.getElementById('platformUsageChart'), {
                type: 'doughnut',
                data: {
                    labels: ['Web', 'Mobile', 'Tablet'],
                    datasets: [{
                        data: [300, 50, 100],
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
                    }]
                }
            });
        }, 1000);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Feedback Analyzer</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        .container {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            width: 80%;
            max-width: 800px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        h1 {
            text-align: center;
            color: #fff;
            margin-bottom: 30px;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border-radius: 10px;
            border: none;
            margin-bottom: 20px;
            font-size: 16px;
        }
        button {
            width: 100%;
            padding: 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 30px;
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
        }
        .sentiment {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        .keywords {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .keyword {
            background: rgba(255, 255, 255, 0.3);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 AI Feedback Analyzer</h1>
        <textarea id="feedbackInput" placeholder="Paste customer feedback here..."></textarea>
        <button onclick="analyzeFeedback()">Analyze Feedback</button>
        <div id="result"></div>
    </div>

    <script>
        function analyzeFeedback() {
            const feedback = document.getElementById('feedbackInput').value;
            const result = document.getElementById('result');
            result.innerHTML = '<p>Analyzing feedback...</p>';
            
            // Simulating AI analysis
            setTimeout(() => {
                const sentiments = ['😃 Positive', '😐 Neutral', '😞 Negative'];
                const sentiment = sentiments[Math.floor(Math.random() * sentiments.length)];
                const keywords = ['Product', 'Service', 'Quality', 'Price', 'Support', 'User Experience']
                    .sort(() => 0.5 - Math.random())
                    .slice(0, 4);
                
                result.innerHTML = `
                    <div class="sentiment">${sentiment}</div>
                    <h3>Key Insights:</h3>
                    <div class="keywords">
                        ${keywords.map(keyword => `<span class="keyword">${keyword}</span>`).join('')}
                    </div>
                    <p>The feedback primarily focuses on ${keywords.join(', ')}. 
                    Overall sentiment appears to be ${sentiment.toLowerCase()}. 
                    Consider addressing these key areas to improve customer satisfaction.</p>
                `;
            }, 2000);
        }
    </script>
</body>
</html>

Remember to adapt these examples to fit your specific use case and branding. They serve as a starting point to inspire your own creative and functional custom tabs.

Getting Started

Deploy

Agent Creation

System Prompt

Channels

Features

Whitelabeling

Agency

Clients

Integrations

Pricing

Support

Creating Custom Tabs

Managing Custom Tabs

Visibility Toggle

Reordering

Editing

Deleting

Use Cases and Ideas

Getting Started

Deploy

Agent Creation

System Prompt

Channels

Features

Whitelabeling

Agency

Clients

Integrations

Pricing

Support

​Creating Custom Tabs

​Managing Custom Tabs

Visibility Toggle

Reordering

Editing

Deleting

​Use Cases and Ideas

Creating Custom Tabs

Managing Custom Tabs

Use Cases and Ideas