How to Build an AI Chatbot in Rise 360

Some Rise courses need more than polished content—they need a place for learners to ask follow-up questions in the moment. With Mighty’s custom code features, you can add a ChatGPT-style chatbot that responds like a subject matter expert.

How to Build an AI Chatbot in Articulate Rise with Mighty & ChatGPT

This is especially useful for complex topics, compliance training, regulated content, or any course where learners are likely to think, “Wait, how does this apply to me?”

What you’re building#

In the video walkthrough, Nate adds a small chatbot icon to the bottom-right of a Rise course. It’s set up so that when a learner clicks it, a modal opens with the prompt:

What can I help with?

From there, the learner can ask a question about the course content. In the demo, the course is about mental health awareness and includes content on cognitive reframing. A learner asks:

Hey, are there other methods that are effective similar to cognitive reframing?

The chatbot sends that question to OpenAI, then returns a course-relevant answer with examples like mindfulness, behavioral activation, exposure therapy, and relaxation techniques. The learner can keep asking follow-up questions, close the chatbot, continue through the course, and come back to it later. The chatbot icon will remain persistent throughout the course.

Before you start#

You’ll need a few things in place:

• A Rise course, with Mighty installed and activated
• An OpenAI account at platform.openai.com
• The chatbot JavaScript and CSS files from the Mighty Code Catalog in the Maestro Community

In the walkthrough, Nate uses prebuilt chatbot code from the Mighty Code Catalog, then updates a few key values: the OpenAI API key, the course ID, the course content, and the system prompt.

Step 1: Create an OpenAI API key#

First, you need an API key so the chatbot can send learner questions to OpenAI and receive responses.

1. Go to platform.openai.com.
2. Sign in or create an account.
3. In the left menu, open API keys.
4. Select Create a new secret key.
5. Give the key a name.
6. Select Create.
7. Copy the secret key right away.

OpenAI will only show the full secret key once when you create it. If you close the window without copying it, you’ll need to create another key.

You’ll paste this key into the chatbot JavaScript function in the next step.

Step 2: Get the chatbot files from the Mighty Code Catalog#

The demo uses two pieces from the Mighty Code Catalog:

• A JavaScript function that creates the chatbot and handles the OpenAI connection
• A CSS file that styles the chatbot icon, modal, and overall visual treatment

You do not need to write the function from scratch. In the walkthrough, Nate mentions that ChatGPT helped craft the JavaScript and that the styling has already been prepared so you can drop it into your course and modify it if needed.

Step 3: Paste the JavaScript into Mighty custom code#

Next, open your Rise course and go to the Mighty custom code area for your theme.

1. Open the Rise course where you want the chatbot.
2. Open Mighty.
3. Go to the custom code area of your theme.
4. Paste in the chatbot JavaScript function from the Code Catalog.

Inside that function, you’ll update a few values that control how the chatbot behaves.

Step 4: Add your OpenAI API key#

Look for the OpenAI API key value in the JavaScript function. Paste the secret key you created at platform.openai.com into that spot.

This is what allows your Rise course to communicate with the AI service. Without the API key, the chatbot can appear visually, but it won’t be able to send questions or retrieve answers.

Step 5: Set a unique course ID#

The function also includes a course ID value.

The course ID is used so the chatbot can save and load chat history for a specific course. That way, if you use this same chatbot pattern in multiple Rise courses, the learner’s chat history from one course won’t get mixed into another.

Give each course its own unique ID. It doesn’t need to be complicated—it just needs to be specific enough that you won’t reuse it accidentally across multiple courses.

Why this matters: if you’re building several similar courses, especially in a curriculum, shared chat history could confuse learners. A unique course ID keeps the chatbot’s memory tied to the right course experience.

Step 6: Tell the chatbot what the course is about#

The JavaScript function includes a course content area. This is where you give the chatbot context about the course.

In the demo, the example is intentionally simple:

This course is covering mental health awareness.

That short description tells the chatbot to frame responses around mental health awareness. You could keep it broad like that, or you could provide as much detail as you want.

For example, you might include:

• A short summary of the course
• Key learning objectives
• A glossary of important terms
• Boundaries around what the chatbot should and should not answer

Nate notes that you could put your entire course content in this section if you wanted the chatbot to have that context. The right amount depends on the course, the risk level of the topic, and how specific you need the responses to be.

For a low-risk internal skills course, a concise summary may be enough. For compliance or regulated training, you’ll probably want tighter instructions and more explicit boundaries.

Step 7: Tune the system prompt#

The system prompt is where you shape the chatbot’s behavior.

This is different from the course content. The course content tells the chatbot what the course is about. The system prompt tells it how to respond.

In the walkthrough, Nate points out that you can use the system prompt to add boundaries like:

• Only give responses related to mental health
• Do not answer unrelated questions
• If the learner asks something outside the course topic, give a specific fallback response
• Use the course content to keep answers relevant

Don’t skip this step! The system prompt is where you can make the chatbot feel less like a generic AI tool and more like a focused course companion.

For example, if your course is about workplace safety, you might instruct the chatbot to answer only within the scope of the course and refer learners to their supervisor or safety officer for site-specific decisions. If your course is about mental health awareness, you may want the chatbot to avoid clinical diagnosis and encourage appropriate professional support when needed.

Step 8: Add the chatbot CSS#

After the JavaScript is in place, add the styling.

1. Download the CSS file from the Mighty Code Catalog.
2. Copy the CSS.
3. Paste it into the CSS area in Mighty’s custom code section.
4. Adjust the styling if you want to change the look.

The demo uses CSS to create the chatbot’s visual experience: the bottom-right icon, the modal window, and the general styling that makes the interaction feel like a familiar AI chat assistant.

You can modify the CSS to better match your course aesthetic. For brand-sensitive projects, this is where you’d adjust the icon, spacing, colors, or other visual details so the chatbot feels integrated rather than bolted on.

Step 9: Save and preview your Rise course#

Once your JavaScript and CSS are added:

1. Select Save in Mighty.
2. Run a preview of the course.
3. Look for the chatbot icon in the bottom-right corner.
4. Click the icon to open the modal.
5. Ask a course-related question.
6. Check whether the answer reflects your course content and system prompt.

In the demo, the chatbot persists as the learner moves through the course, so they can open it when a question comes up, close it, keep reading, and return to it later.

If the responses are too broad, adjust the course content and system prompt. If responses are too restrictive, loosen the prompt slightly.

A quick security note about API keys#

There’s one important caveat noted in the walkthrough: the OpenAI secret key is placed in plain text inside the JavaScript file.

That is generally not a best practice.

For a public website or open application, you would not want to expose an API key this way. In this Rise use case, Nate notes that the course is typically deployed to a controlled audience—not openly available on the public web—which lowers the risk.

Still, you should treat this as a real implementation decision. Before using this in production, consider your organization’s security requirements, where the course will be hosted, who can access it, and what data learners may type into the chatbot.

For internal prototypes, pilots, or controlled course launches, this may be acceptable. For sensitive audiences or highly regulated environments, bring in your technical or security team before publishing.

Using AI chatbots in instructional design#

A chatbot inside Rise is not a replacement for good course design. It should not be used to patch unclear content or offload critical instruction to AI.

But it can be a helpful support layer.

Think of it as a course-aware sidekick: available when learners need clarification, able to explain related concepts, and persistent enough to support questions as they move through the experience. For dense topics, that can reduce friction. For learners who are hesitant to ask questions in a live setting, it can create a private place to explore.

The design work is in the constraints. Give it the right course context. Write a careful system prompt. Test the kinds of questions learners are likely to ask. Make sure the answers are useful, accurate enough for the use case, and appropriately bounded.

“What can I help with?”#

With Mighty custom code, you can add a persistent ChatGPT-style chatbot to a Rise 360 course using the prebuilt JavaScript and CSS from the Mighty Code Catalog, an OpenAI API key, a unique course ID, course context, and a tuned system prompt.

Try it first in a low-risk course or prototype. Ask the messy questions your learners would actually ask, refine the prompt, and see whether an AI sidekick earns its spot in the experience.