No Auth but Chat [V4]
This chat application is designed specifically for complex sites or apps have no built-in authentication and niether want one but chat functionality only.
Prerequisite
- Signup/Login to your account at MagicChat.
- Create a New App and be sure to select Version V4 during setup.
- Navigate to the App Details page and note your: , App Name, API Key, Tenant ID
Project setup
Client Side Integration
To integrate it into your app, Do the following.
1. Load The Scripts
Locate the main entry file, typically index.html, and insert the following code snippet into the <head> section of the HTML document.
It should ideally be placed head of the root file.
<script src="https://cdn.socket.io/4.1.2/socket.io.min.js"></script><script src="https://magicchat-core.github.io/prod-ssc-client-cdns/bundle.js">
</script>2. Decide the placement of the Magicchat chat box in your app.
Centralized Implementation:
For applications with a common root layout (e.g., main index.js or layout component that renders on every route), combine both setUp and initialize logic in a single location.
This ensures the chatbox renders consistently across all routes
and avoids code duplication across screens.
Final Implementation
For single-route applications where the chat interface should appear universally, use this centralized approach:
Step 1 + Step 2 â Show the chatbox on all pages under a specific root route.
Run the setUp function at your application's entry point (usually the landing page or root URL) to ensure it loads immediately when the application starts.
<script>
document.addEventListener("DOMContentLoaded", async function () {
// Step 1: Initial setup
await window.magicchat_io.setUp(
"<MAGICCHAT_APP_NAME>",
"<MAGICCHAT_API_KEY>",
);
// Step 2: Initialize chat
await window.magicchat_io.initialize({"app_version":"V4"});
});
</script>âšī¸
Parameter Details
| Parameter | Type | Description |
|---|---|---|
| app_name | string | Unique application identifier |
| api_key | string | Base64 encoded API key |
â ī¸
Critical Requirement
The setUp function must execute before initialize in all cases.
Example Implementation
View complete implementation examples in our GitHub repository:
Successfully onboarded users will appear in the MagicChat Admin Panel with their associated applications.
1
Admin Panel - Onboarded Users
2
Admin Panel - No Users
Applications without onboarded users will display an empty state:
Congratulations! Your integration should now be successful!
Your users can now sign up and seamlessly chat with the Admin Team, enabling two-way communication.
Please contact our Support Team if you encounter any issues. Thank you!