Embed Docstar Editor

The Embed feature lets you seamlessly integrate DocStar into your own product. With just a simple script, your users can create, edit, and manage documents—without leaving your interface.

This guide walks you through setup, customization, and event handling.

How Embedding Works

1. Create an Embed Collection

Inside DocStar, create a collection specifically for embedding.

2. Choose Your Configuration

Select the extensions and features you want in the embedded editor—such as Bold, Italic etc

3. Configure Your Editor

Select the extensions and features to enable in the embedded editor:

• Show/Hide Publish & Unpublish Buttons – Optionally display publishing controls. Rename them if desired.

• Show/Hide Page Name – Toggle page title display.

Response Type – Choose between HTML and Markdown for outside event responses.

Step-by-Step Integration

Step 1 – Generate JWT Payload

Provide the required identifiers for authentication:

{
  "org_id": "orgId", 
  "collection_id": "Your CollectionId",
  "user_id": "UserId"
}

Click Generate Access Token to create your embed token.

Step 2 – Add Script to Your Product Page

<script
  id="docstar-main-script"
  embedToken="Enter Embed Token here"
  defaultOpen="true"
  page_id= "your page id"
  src="https://docstar.io/scriptProd.js">
</script>

Send Data to DocStar

How to create a dynamic page with content:

window.sendDataToDocstar({
  "parentId": "parentContainer",
  "page_id": "your page id",
  "content": "content" // content to insert (optional)
});

How to update existing content:

window.sendUpdateToDocstar({
"page_id":"your page id",
 "content": "content" //content to update
})

Get Data From Docstar

1. Through Events

Capture editor events inside your application:

window.addEventListener('message', (event) => {
  const receivedData = event.data;
});

Published page data

window.addEventListener('message', (event) => {
  const { type, data } = event.data;

  if (type === 'docstar_publish_data') {
    console.log('Received published page data:', data);
  }
});

Outside click event

window.addEventListener('message', (event) => {
  const { type, data } = event.data;

  if (type === 'editor_data') {
    console.log('Received editor HTML:', data);
  }
});

2. Through Webhook Section

Just specify the URL where you'd like us to send these updates.