🤖
Dify × STUDIO 独自ボタンアイコンを設定する方法
何をするか？
Dify で作成したチャットボットを STUDIO で作成したサイトに埋め込み、チャットボット開閉ボタンのアイコンを独自で設定します。
こんな感じで、右下に表示されるチャットボット開閉ボタンのアイコンをいい感じにしようと思います。
ではいきます。
1. Dify で作成したチャットボットの埋め込み用コードをコピーする
dify で 「Monitoring」 タブを開き、「Embedded」ボタンを押します。
① 中央を選択します
② コピーアイコンをクリックして、クリップボードにコピーします
2. 埋め込み用コードを STUDIO の custom code に追加する
⓪ STUDIOを開きます
① 「Pages」タブを開きます
② 設定アイコンを押します
③ 先ほどコピーしたコードを 「Custom code」の「End of <head> tag」に貼り付けます
3. チャットボット開閉ボタンに使用したいアイコン画像を STUDIO でアップロードする
① 「Add」タブを開きます
② 「Uploads」タブを開きます
③ 「+」ボタンを押します
④ 「Upload image」ボタンを押します
⑤ 画像をアップロードします
開発環境を開いて、アップロードされた画像にカーソルを合わせ、該当画像のURLらしきものをコピーします
4. custom code を修正する
① 「Pages」タブを開きます
② 設定アイコンをクリックします
③ 以下のようなコードを貼り付けます
<script>
window.difyChatbotConfig = {
token: '<TOKEN>'
}
</script>
<script
src="https://udify.app/embed.min.js"
id="<TOKEN>"
defer>
</script>
<style>
#dify-chatbot-bubble-button {
background-color: unset !important;
background-image: url('<IMAGE_URL>');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#dify-chatbot-bubble-button > div {
display: none !important;
}
</style>
<TOKEN>と<IMAGE_URL>は置き換えてください。
5. publishする
「Publish」ボタンを押します
「Update」ボタンを押します
リンクを開きます
6. 完🎉
おわりに
ありがとうございました。
不明点などありましたら、ご気軽にコメント下さい。
Discussion
はじめまして。
素晴らしい記事をありがとうございます！
いくつか質問があります。
ご回答いただけると助かります！
よろしくお願いいたします。