WordPressサイトの上で力仮想エージェントチャットボットを加えてください

私はprevious post私はカスタムのWebサイトやポータルにそれを追加するときにスタイルをどのようにチャットボットを説明している.しかし、私は常にWordPressサイトにチャットボットを加えることができると思いました、そして、私はその質問に対する答えを見つけることができました.だから、どのように我々はそれを達成することができます見てみましょう.このポストでは、私はWordPressサイトにボットを加える方法を示しています.スタイリングを理解するために私のprevious postを参照してください.
開始する前に、Power Virtual Agentを使用してボットを構築するまた、WordPressを使用している場合、またはWordPressを管理していることを確認します.それから、あなたはビジネス計画または上記を必要とします.次に、Head and Footer Scripts Inserterプラグインをインストールする必要があります.したら、前方に移動することができますこれらの前提条件があります.私は、私の変更をするために管理されたWordPressサイトを使用しています.

あなたのページを構築

既存のページを選ぶことができますが、これを行う前に新しいページを追加することをお勧めします.

ページアプリケーションを追加したら、ページエディタに移動します.このエディタでビジュアルエディタからコードエディターに切り替えます.次のコードを追加し、ページを発行/更新します.

<!-- Chat Bot -->
<button onclick="openChat()" role="openchatbutton" class="open-button">
 <i class="fa fa-4x fa-comments"></i>
</button>
<div role="openchat" id="chatWindow" class="chat-popup" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
 <div>
  <div id="webchat" role="main"></div>
 </div>
</div> 

スクリプトを追加

適切なスクリプトを追加しましょう.これを行うには、[設定]メニューからスクリプトインサートに移動します.

このページでは、2つのセクションでいくつかのテキストブロックが表示されますヘッドセクションとフッターセクションの別の1つ.次のスクリプトを適切なtextblockに追加します.
番目のテキストブロックの先頭セクションでは、次のスクリプトを追加します.

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> 

最初のテキストブロックのフッターセクションでは、次のスクリプトを追加し、強調表示されたコードを自分のBOT IDに置き換えます.

<script>
    // Only for Power Apps Portals
    const styleOptions = {

        // Add styleOptions to customize Web Chat canvas
        hideUploadButton: true,
        botAvatarInitials: 'TAB',
        userAvatarInitials: 'You',
        backgroundColor: 'rgba(255,255,255,0.85)'
    };

    // Add your BOT ID below 
    var BOT_ID = "YOUR BOT ID";
    var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

    fetch(theURL)
        .then(response => response.json())
        .then(conversationInfo => {
            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({
                        token: conversationInfo.token,
                    }),
                    styleOptions
                },
                document.getElementById('webchat')
            );
        })
        .catch(err => console.error("An error occurred: " + err));
</script>

あなたが見ることができるように、我々は上記のスクリプトでBOTに背景色を定義しました、しかし、あなたがより多くのスタイルをあなたのロボットに加えてあなたのボタンに加えたいならば、あなたは若干のCSSを加える必要があります.そのためには、外観にカスタマイズする必要があります.これは、カスタマイズ画面を起動しますこの画面であなたのテーマを許可する場合は、オプションのCSS(またはあなたのテーマに応じていくつかのもの)、それをクリックして表示されます.CSSエディタのテキストブロックが表示されます次のCSSをこのテキストブロックに追加し、「発行」をクリックします.

div[role="form"] {
  background: rgba(255,255,255,0.6);
}  
div[role="status"] {
  border-bottom: 1px solid rgb(230, 230, 230);
} 
div[role="status"] button {
  border-color: rgb(0, 0,0,0.4) !important;
  color: rgb(0, 0, 0) !important;
} 
#webchat {
    position: fixed;
    height: calc(100% - 230px);
    z-index: 9999;
    width: 400px;
    top: 140px;
    right: 30px;
    overflow: hidden;
}
.chat-popup {
    display: none;
}
.open-button {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
} 

一度すべてのこれらの手順を完了すると、ボタンを右上隅に浮上表示するために追加されたページに移動することができます.ボタンをクリックするとボットウィンドウが表示されます.デモclick hereをチェックアウトします.
ライブデモをチェックするには、私の妻のウェブサイトでまだ利用可能なページを続けているしたがって、http://coffeecompasscreations.com/test-bot/に行く.
楽しいチャット!