🤖

Dify × STUDIO 独自ボタンアイコンを設定する方法

2024/08/15に公開

studio

chatbot

Dify

tech

何をするか？

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>