Hi everyone! I want to trigger a Joyride guided tour from inside a Dify chatbot — so when a user asks something like “how do I do X?”, the bot can respond and simultaneously launch a step-by-step UI walkthrough on the page.
Here’s what I found after digging in, and I’d love to know if I’m missing anything.
The problem with the embed widget
Dify’s default embed widget (embed.min.js) renders inside a sandboxed iframe. Because of how browser sandboxing works, the iframe can’t:
-
Emit custom events to the parent page
-
Call
window.dispatchEvent()on the host app -
Access or interact with the host’s React component tree
The approach I’m considering
Replace the embed widget with a custom chat component built directly in React, calling the Dify API (POST /v1/chat-messages) with fetch(). Dify remains the backend — LLM, knowledge base, conversation history — nothing changes there. Only the chat UI moves out of the iframe and into the host app’s React tree.
The Dify workflow would return a structured action alongside the answer:
{
"answer": "Sure! Let me show you how.",
"metadata": {
"tour_action": "feature_x_tour"
}
}
And the React component would handle it:
if (response.metadata?.tour_action) {
startJoyrideTour(response.metadata.tour_action);
}
I’m still brainstorming but this is the last step I need to figure out to turn dify into an intent-aware, proactive and visual copilot 