In this article we will build an AI chatbot. Before writing code, we decide what this chatbot must do. Based on who we are helping and what results they expect we would decide how the chatbot would function.
For this article we will take the example of a course creator who needs an AI chatbot before and after a student buys.
Results that matter for a course creator
- Raise course completion from about 20% toward 40% or higher.
- Let the bot answer about 70% of common questions so the creator gains back 20-30 hours each month.
- Turn more trials into paid seats by keeping prospects in chat with previews and reminders.
- Get 80% of buyers to start a lesson within the first day so they stay engaged.
- Keep human escalations under 20% so staff can focus on students who truly need help.
Now, based on the above results we would need to decide the AI chatbot behaviour and pick features which serve those results. For our example of a course creator we can select the features below.
| Feature | Why this helps |
|---|
| Bubble Widget | Sits quietly in a corner with a timed preview line so visitors can ask about lessons without losing their place. Good for pre-sale work and quick nudges. |
| Popup Widget | Opens as a modal when someone finishes checkout or stalls on a module, making it easy to push onboarding steps or rescue stuck students. |
| File Search & RAG | Feeds lesson transcripts, worksheets, and FAQ docs into the bot so every reply references real material instead of generic text. |
Build it in five short steps
1. Create and add the system instructions
We will use Predictable Dialogs which has an open source chat widget, into which we would add the system instructions that explain tone, steps, and rules.
2. Upload course files for File Search & RAG
Next we will upload lesson plans, transcripts, homework keys, policy docs, and sample answers. Keep each file clean with headings. Break long docs into 100-200 token chunks with about 20 token overlap so the bot keeps context. Ask test questions that reference tricky spots and confirm the bot cites the right snippets. Keep adding or fixing files until answers stay accurate.
Use the web embed script and choose the bubble variant. This version stays on every page without blocking content. You can capture user info, theme the button, and show a preview message. Here is a starter snippet:
<script type="module">
import Agent from 'https://cdn.jsdelivr.net/npm/@agent-embed/js@latest/dist/web.js'
Agent.initBubble({
agentName: "course-companion",
user: {
user_id: window?.USER_ID ?? "anon",
user_segments: ["prospect"],
},
previewMessage: {
message: "Need a study plan?",
autoShowDelay: 4000,
},
theme: {
placement: 'right',
button: { backgroundColor: "#4C3AFF", iconColor: "#FFFFFF" },
previewMessage: { backgroundColor: "#4C3AFF", textColor: "#FFFFFF" }
}
});
</script>
To add this to WordPress you have two simple paths:
- Site Editor: go to Appearance → Editor → Pages, add a page or template block, insert a Custom HTML block, and paste the script.
- WPCode plugin: install WPCode, go to Code Snippets → Add New → HTML Snippet, paste the script, toggle Activate, and save. This lets you load the widget on every page.
Keep the preview short. Trigger Agent.open() or Agent.showPreviewMessage() when someone hits a pricing page or watches a lesson preview by attaching those calls to your WordPress buttons.
Use the popup version on checkout pages, onboarding flows, or inside the LMS when someone seems stuck. The modal takes over the middle of the screen, so use it only when the student must do something next.
<script type="module">
import Agent from 'https://cdn.jsdelivr.net/npm/@agent-embed/js@latest/dist/web.js'
Agent.initPopup({
agentName: "course-coach",
autoShowDelay: 0,
defaultOpen: true,
user: {
user_id: lessonProgress.userId,
user_segments: ["purchased", lessonProgress.currentModule]
},
initialPrompt: `The learner is stuck on module ${lessonProgress.currentModule}.`,
onClose: () => analytics.track("Module Popup Closed")
});
</script>
To show this inside WordPress, paste the popup script into the exact template or block that renders your checkout or lesson page. If you need it site-wide, add it through WPCode but wrap the call in a condition (for example, check the current page slug in a small inline script) so it only opens where it makes sense. Control width so it fits phones. Toggle it with Agent.open(), Agent.close(), or Agent.toggle() when WordPress detects a stalled learner (for example, after a custom block notices no quiz submission).
5. Test, monitor, improve
Ask the bot for edge cases, like grading rules or refund deadlines, and see if it cites the right file chunk. Watch engagement logs to see if the preview timing or popup triggers are annoying people. Adjust the scripts until questions fall under the 20% escalation goal. Re-upload files whenever you add modules so the index stays current.
Wrap up
When you start with helping a course creator support and convert students, you only need three features: Bubble Widget, Popup Widget, and File Search & RAG. Build the agent, load the files, drop in both widgets through the WordPress Site Editor or WPCode, and keep testing. You get faster responses for students, fewer repetitive tickets for the creator, and better odds that everyone finishes the course.
