dify嵌入网站进行参数传递-vue3（初级版）

背景

想要将Dify嵌入到自己的系统中，身份验证等方面，需要传递参数

1. 配置difyChatbotConfig
2. 加载embed.min.js
3. 完整代码
4. 获取token

<script setup lang="ts">
import { onMounted, ref } from "vue";

onMounted(async () => {
  try {
    // 初始化聊天机器人
    await initDifyChatbot();
  } catch (error) {
    console.error("初始化失败:", error);
  }
});
const difyChatbotConfig = {
  token: "请查看如何获取token",
  baseUrl: "https://udify.app",
  dynamicScript: true, // 关键配置：让脚本立即执行而不是等待body.onload
  draggable: true,
  containerProps: {
    style: {
      width: "60px",
      height: "60px",
      borderRadius: "30px"
    }
  },
  inputs: {
    token: "25477",
    name: "weirdo"
  },
  systemVariables: {
    user_id: "124888"
  }
};
const getDifyScriptUrl = (): string => {
  return (
    `https://cloud.dify.ai/embed.min.js?v=${Date.now()}` || ""
  );
};

// 初始化 Dify 聊天机器人
const initDifyChatbot = () => {
  return new Promise<void>((resolve, reject) => {
    try {
      // 先设置配置到window对象
      (window as any).difyChatbotConfig = difyChatbotConfig;
      console.log("Dify chatbot initialized successfully", difyChatbotConfig);
      const script = document.createElement("script");
      script.src = getDifyScriptUrl();
      script.defer = true;
      script.onload = () => {
        console.log("Dify chatbot script loaded successfully");
        resolve();
      };
      document.body.appendChild(script);
    } catch (error) {
      reject(error);
    }
  });
};

</script>
<template>
  <div class="dify-chatbot-container">
  </div>
</template>

<style>
.dify-chatbot-container {
  width: 100%;
  height: calc(100vh - 60px);
}
</style>

最后实现的效果