Can Dify's chatbot trigger host-page events like a pop up tour?

帮我建造
1

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 :slight_smile:

1 个赞