| Table of Contents | ||
|---|---|---|
|
...
| Code Block |
|---|
<iframe src="https://orthogramic.com/embed/mindmap?id=YOUR_MAP_ID&token=YOUR_AUTH_TOKEN" width="100%" height="600px" style="border:none;" allowfullscreen> </iframe> |
Key Parameters
Parameter | Type | Required | Description |
|---|---|---|---|
|
| ✅ | The unique mindmap ID |
|
| ✅ | Authentication token |
| `"light" | "dark"` | ❌ |
|
| ❌ | Zoom level (e.g., |
...
| Code Block |
|---|
<iframe class="mindmap-container" src="https://orthogramic.com/embed/mindmap?id=12345&token=abc123" ></iframe> |
Using the JavaScript SDK
...
For developers who need greater flexibility, our JavaScript SDK allows embedding a dynamic, interactive Orthogramic mindmap with real-time updates via WebSockets.
...
| Code Block |
|---|
<script src="https://orthogramic.com/sdk/mindmap.js"></script> |
Embedding
...
with WebSockets
| Code Block |
|---|
<div id="mindmap-container"></div>
<script>
const socket = new WebSocket("wss://orthogramic.com/ws/mindmap");
socket.onopen = function() {
socket.send(JSON.stringify({
action: "subscribe",
mindmapId: "12345",
token: "abc123"
}));
};
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.update) {
OrthogramicMindmap.render({
container: "mindmap-container",
mindmapId: data.mindmapId,
token: "abc123",
theme: "dark"
});
}
};
socket.onerror = function(error) {
console.error("WebSocket Error: ", error);
};
socket.onclose = function() {
console.log("WebSocket connection closed. Reconnecting...");
setTimeout(() => {
location.reload(); // Simple reconnection strategy
}, 5000);
};
</script> |
Available Options
Parameter | Type | Default | Description |
|---|---|---|---|
|
| Required | The HTML element ID where the mindmap will be loaded |
|
| Required | The unique ID of the mindmap |
|
| Required | Authentication token |
|
|
| Width of the container (supports |
|
|
| Height of the container |
|
|
| Zoom level ( |
...
| Code Block |
|---|
<script>
let retryCount = 0;
function connectWebSocket() {
const socket = new WebSocket("wss://orthogramic.com/ws/mindmap");
socket.onopen = function() {
retryCount = 0;
socket.send(JSON.stringify({
action: "subscribe",
mindmapId: "12345",
token: "abc123"
}));
};
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.update) {
OrthogramicMindmap.render({
container: "mindmap-container",
mindmapId: data.mindmapId,
token: "abc123",
theme: "dark"
});
}
};
socket.onclose = function() {
console.log("WebSocket closed. Reconnecting...");
retryCount++;
setTimeout(connectWebSocket, Math.min(1000 * 2 ** retryCount, 30000)); // Exponential backoff
};
}
connectWebSocket();
</script>
|
Choosing the right method
Feature |
| JavaScript SDK |
|---|---|---|
Easy to integrate | ✅ Yes | ❌ Requires JavaScript |
Dynamic updates | ❌ No | ✅ Yes |
Custom styling | ❌ Limited | ✅ Full control |
Real-time support | ❌ No | ✅ Yes |
Secure authentication | ❌ Token in URL | ✅ Backend token retrieval |
...