SaaS demo for JavaScript

Introduction

This demo showcases the integration of dashboards and AI chats into a JavaScript application. The goal is to reduce reliance on Conduit's API, enabling the creation of a functional application in just 15 minutes, ready for real user interaction.

To get started, download the project from the GitHub repository and open Index.html in your browser.

Note that this demo is frontend-only and utilizes a demo Conduit account with pre-configured dashboards and AI chats.

Project Structure

The project includes the following components:

• Index.html - Main entry point
• assets/scripts.js - JavaScript frontend logic
• assets/users.js - Data structure mapping users to specific dashboards

The JavaScript frontend loads widgets from the Conduit server within an iframe.

Running the Demo with Your Data

To connect your application's data to the AI, configure the data connection in Conduit. The demo account currently uses uploaded CSV files as data sources, which can later be replaced with real data sources via an HTTP API endpoint.

Follow these steps to get started:

1. Create an account in Conduit and set up a dashboard for User 1.
2. Copy the dashboard URL to assets/users.js.
3. Repeat the process for other users as needed.

Dashboards can be easily cloned for multiple users.

Next Steps

Connecting Real Data

Replace the static CSV data with an HTTP API endpoint. Conduit will append a parameter (user ID) to the request, allowing the endpoint to return data specific to the user.

Using Dynamic Widgets

The current demo uses a static list of users and widget URLs, which works well for a small number of users. For larger user bases, dynamic widgets are more practical.

1. Create one or more widget templates.

2. Parameterize the templates using the userid parameter in the URL:

   https://app.getconduit.app/r/public/dashboard/b9ddcbdc-f69e-4262-8783-02f69b2a55fc/?userid=
   https://app.getconduit.app/r/public/copilot/44c3daad-5639-4807-b811-42a325124fcb/?userid=
   

Widgets will use this parameter to display data specific to each user.

Securing Data Access

To protect against unauthorized access, instead of raw ID for the userid parameter, use a structure combining an ID with a short-lived session token.

1. Generate a session token during user authentication.
2. Include this token in the userid parameter.
3. Ensure that your data endpoint validates the token before returning any data.