Authoring Tool Guides

Each supported authoring tool has its own integration code. After creating a slide configuration, open the Integration code section on the slide edit page, select your authoring tool, and copy-paste the code.

Supported authoring tools

Authoring tool	Status	Integration method
Articulate Storyline	Stable	Execute JavaScript trigger
Adobe Captivate	Beta	Execute JavaScript (Advanced Action)
Lectora (ELB Learning)	Beta	Run JavaScript action
DominKnow / Claro	Beta	HTML Widget
iSpring Suite	Beta	Web Object or Execute JavaScript trigger
HTML Widget (universal)	Stable	Embed as iframe or web object

Beta authoring tools: The generated code for Captivate, Lectora, DominKnow, and iSpring has not been fully tested in production. If you encounter issues, please report them. The integration logic is the same across all authoring tools — only the variable read/write syntax differs.

---

General workflow

Regardless of the authoring tool, integration follows the same pattern:

1. Create variables in your authoring tool — At minimum, a userMessage variable (the learner’s input) and an aiResponse variable (where SlideMind writes the AI answer). If you have return variables, create matching variables in your authoring tool.
2. Create a slide in SlideMind — Configure your system prompt, model, and mode (Q&A or Chat).
3. Copy the generated code — From the slide edit page, select your authoring tool and copy the code.
4. Paste the code in your authoring tool — Into the appropriate action/trigger (see tool-specific instructions below).
5. Publish and test — Upload to your LMS and verify the interaction works.

What the generated code does

The generated code is a short bootstrap snippet (~12 lines) that loads the SlideMind runtime (sm-slide.js) from your WordPress server. The runtime then handles the rest:

• Learner identification — Detects the learner via SCORM 2004 (cmi.learner_id), SCORM 1.2 (cmi.core.student_id), xAPI actor, or sm_user URL parameter. When no LMS is present, falls back to an anonymous session (UUID in localStorage).
• Chat request — Reads the learner’s message from the editor variable, sends it to the SlideMind REST API (POST /wp-json/slidemind/v2/chat), and writes the response back.
• Structured responses — If return variables are configured, the AI response is parsed as JSON and each value is written to the corresponding editor variable (for scoring, branching, etc.).
• Learner memory (if configured) — Initializes SM_Memory.save() / SM_Memory.load() helpers and saves/loads variables as specified in the configuration.
• Editor adapters — The runtime reads and writes variables natively for each supported authoring tool. No tool-specific code appears in the snippet itself.

Chat mode note

In Chat mode, the code generator switches to the HTML Widget regardless of the selected authoring tool. Multi-turn conversations need the widget’s built-in UI (message history, turn counter, etc.). The widget can be embedded as a web object in any authoring tool.

Capture mode note

In Capture mode, the bootstrap snippet loads the runtime with mode: "capture". The runtime identifies the learner and saves the specified variables to memory — no AI chat request is made. The widget option is disabled for Capture since there is no UI to display.

---

Articulate Storyline

Status: Stable

Variables to create in Storyline

Variable	Type	Purpose
userMessage	Text	The learner’s input (question or answer)
aiResponse	Text	Where the AI response is written back
(return variables)	Text/Number/Boolean	One per return variable defined in SlideMind

Steps

1. In Storyline, create the variables listed above (Edit > Variables).
2. Add a text entry field bound to userMessage so the learner can type.
3. Add a text box referencing %aiResponse% to display the AI answer.
4. Add a trigger: Execute JavaScript > paste the SlideMind code.
5. Set the trigger to fire When the user clicks a “Send” button (or when the timeline starts, depending on your design).

Syntax used

// Read a Storyline variable
var value = GetVar("userMessage");

// Write to a Storyline variable
SetVar("aiResponse", response);

Tip: Storyline’s GetVar / SetVar functions are globally available inside Execute JavaScript triggers. No additional setup is needed.

---

Adobe Captivate

Status: Beta — the generated code has not been fully tested. Please report any issues.

Variables to create in Captivate

Variable	Type	Purpose
userMessage	Text	The learner’s input
aiResponse	Text	Where the AI response is written back
(return variables)	Text/Number/Boolean	One per return variable defined in SlideMind

Steps

1. In Captivate, create the variables (Project > Variables).
2. Add a text entry box bound to userMessage.
3. Add a text caption displaying $$aiResponse$$.
4. Create an Advanced Action with an Execute JavaScript command. Paste the SlideMind code.
5. Attach the action to a button or interaction event.

Syntax used

// Read a Captivate variable
var value = cpAPIInterface.getVariableValue("userMessage");

// Write to a Captivate variable
cpAPIInterface.setVariableValue("aiResponse", response);

Note: The SlideMind runtime detects Captivate and waits for cpAPIInterface to become available (polling every 200ms, up to 10 seconds) before executing. No special wrapper is needed in the snippet.

---

Lectora (ELB Learning)

Status: Beta — the generated code has not been fully tested. Please report any issues.

Variables to create in Lectora

Variable	Type	Purpose
userMessage	Text	The learner’s input
aiResponse	Text	Where the AI response is written back
(return variables)	Text/Number/Boolean	One per return variable defined in SlideMind

Steps

1. In Lectora, create the variables (Tools > Variables).
2. Add a text entry field bound to userMessage.
3. Add a text block displaying the aiResponse variable.
4. Add a Run JavaScript action to a button. Paste the SlideMind code.

Syntax used

// Read a Lectora variable
var value = VarCmd_userMessage.getValue();

// Write to a Lectora variable
VarCmd_aiResponse.set(response);

Note: Lectora exposes variables as global VarCmd_<name> objects. Variable names must match exactly between Lectora and SlideMind.

---

DominKnow / Claro

Status: Beta — the generated code has not been fully tested. Please report any issues.

Variables to create in DominKnow

Variable	Type	Purpose
userMessage	Text	The learner’s input
aiResponse	Text	Where the AI response is written back
(return variables)	Text/Number/Boolean	One per return variable defined in SlideMind

Steps

1. In DominKnow | Claro, create the data fields you need.
2. Add an HTML Widget to your page.
3. Paste the SlideMind code inside the widget.
4. The widget communicates with DominKnow via the parent.contentApi bridge.

Syntax used

// Read a DominKnow variable
var value = parent.contentApi.getData("userMessage");

// Write to a DominKnow variable
parent.contentApi.setData("aiResponse", response);

---

iSpring Suite

Status: Beta — the generated code has not been fully tested. Please report any issues.

Variables to create in iSpring

Variable	Type	Purpose
userMessage	Text	The learner’s input
aiResponse	Text	Where the AI response is written back
(return variables)	Text/Number/Boolean	One per return variable defined in SlideMind

Steps

1. In iSpring Suite, add a Web Object or use an Execute JavaScript trigger.
2. Paste the SlideMind code.
3. Variables are read/written as global window properties.

Syntax used

// Read an iSpring variable
var value = window["userMessage"];

// Write to an iSpring variable
window["aiResponse"] = response;

---

HTML Widget (universal)

Status: Stable

The HTML Widget is a page hosted on your WordPress site, embedded as an iframe or web object. It works with any platform that supports iframes or web objects — no JavaScript integration is needed on the authoring tool side.

This is the only option for Chat mode (multi-turn conversations). It also works with Q&A mode.

Note: The widget is not available for Capture mode, since Capture saves variables from the authoring tool without any user-facing interface.

Generated code

<!-- SlideMind Widget -->
<iframe
    src="https://yoursite.com/?sm_widget=1&config=abc123"
    width="400"
    height="600"
    frameborder="0"
    style="border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"
    allow="clipboard-write"
></iframe>

Optional URL parameters

Parameter	Description	Example
theme	Widget theme	dark
color	Primary color (URL-encoded hex)	%234f46e5
ai_color	AI bubble background color (URL-encoded hex)	%23f1f5f9
ai_text_color	AI bubble text color (URL-encoded hex)	%231e293b
title	Header title	Mon+Chat
header	Show or hide the header (1 or 0)	0
radius	Border radius in pixels for bubbles and input	8
sm_user	Learner WordPress user ID	123

For the full list with defaults and cascade behavior, see Widget URL parameters.

Usage in different authoring tools

• Storyline — Insert as a Web Object (Insert > Web Object > paste the URL).
• Captivate — Insert as a Web Object.
• Lectora — Add an HTML Extension or iframe.
• DominKnow — Embed in an HTML Widget.
• iSpring — Insert as a Web Object.
• Any LMS or website — Use the [sm_embed] WordPress shortcode or paste the iframe HTML.

Shortcode

For WordPress pages and posts, use the shortcode instead of raw HTML:

[sm_embed url="https://yoursite.com/?sm_widget=1&config=abc123" width="400" height="600"]

---

CORS configuration

When your e-learning module is hosted on a different domain than your WordPress site (common with LMS platforms), you need to allow cross-origin requests.

1. Go to SlideMind > Settings > CORS.
2. Add the origin(s) where your e-learning modules are hosted (e.g. https://lms.example.com).
3. Save.

Without CORS configuration, the browser will block API requests from the e-learning module.

---

Next steps

• Getting Started — Installation and first slide setup
• Core Features — Learner Integration, Sandbox, Templates, Code Generator, Wizard
• Learner Memory — Persist data across slides, modules, and courses
• Variables — Variable system, profile variables, return variables
• Administration — Dashboard, analytics, settings, CORS
• Security & Privacy — Proxy architecture, encryption, GDPR