iframe
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Chatbot</title>
</head>
<body>
<h1>Iframe Chatbot</h1>
<script>
// Define variables to be encoded
const inputs = {
"user_name": "Tom"
};
// Encoding function
async function compressAndEncode(input) {
const uint8Array = new TextEncoder().encode(input);
const compressedStream = new Response(
new Blob([uint8Array])
.stream()
.pipeThrough(new CompressionStream("gzip"))
).arrayBuffer();
const compressedUint8Array = new Uint8Array(await compressedStream);
return btoa(String.fromCharCode(...compressedUint8Array));
}
// Generate encoded URL
(async () => {
const params = new URLSearchParams();
for (const [key, value] of Object.entries(inputs)) {
params.append(key, await compressAndEncode(value));
}
const baseUrl = "http://localhost/chatbot/nF6Zbpsxk2Hc5vxE";
const iframeUrl = `${baseUrl}?${params.toString()}`;
// Update iframe src
document.querySelector("iframe").src = iframeUrl;
})();
</script>
<iframe
src="about:blank"
style="width: 100%; height: 100%; min-height: 700px"
frameborder="0"
allow="microphone">
</iframe>
</body>
</html>
script
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Chatbot</title>
</head>
<body>
<h1>Script Chatbot</h1>
<script>
window.difyChatbotConfig = {
token: 'nF6Zbpsxk2Hc5vxE',
baseUrl: 'http://localhost',
inputs: {
// You can define the inputs from the Start node here
// key is the variable name
user_name: "Tom"
}
}
</script>
<script
src="http://localhost/embed.min.js"
id="nF6Zbpsxk2Hc5vxE"
defer>
</script>
</body>
</html>
