WordPressに公開

Web埋め込み型チャットフォームとして、DialogPlayで作成したチャットボットを利用することができます。
WordPressを使用してWebサイトを作成する場合、 WEBサイトに公開 と同様に各ページにタグを埋め込む方法と、本手順のようにPHPテンプレートにタグを埋め込む方法の2通りがあります。

  手順(公開準備)

  1. 左メニューの『アプリケーション』を選択し、” 新規作成“ボタンをクリックしてください。

  2. 『チャットボット公開先』に「WEB」 を選択し、『アプリケーション名』を入力してください。
    次に『公開するチャットボット』に対象とするチャットボットを選択します。

    以下機能については、必要に応じて設定してください。
    機能名 説明
    アイコン設定
    ボットの発言時に使用するアイコンを設定できます
    対応画像形式:PNG, JPEG, GIF
    画像サイズ:48px × 48px 以上
    容量上限:3MB
    オペレーター機能
    有効にすることで、チャット中にオペレーターを呼び出すことができます
    詳細については こちら をご覧ください
    接続許可IPアドレス
    指定した接続元以外からのチャットボットの使用を制限します
    また、アップロードされた画像等へのアクセスも制限されます
    IPアドレスまたはネットワークアドレス(CIDR形式)での指定が可能です
    複数指定する場合はカンマ区切りで記述してください
    詳細については こちら をご覧ください
    ※ 接続許可IPアドレス機能は、 Advanceプランのみ でご利用いただけます

  3. 公開“ボタンをクリックしてください。

  4. 『チャット画面のカスタマイズ』の各入力欄を、必要に応じて設定してください。
    『チャット画面のカスタマイズ』各項目の詳細については、 こちら をご覧ください。

  5. コピー“ボタンをクリックして、タグの内容をコピーしてください。

  手順(WordPressへの埋め込み)

  1. 「手順(公開設定)」で取得したタグを、WordPressのPHPで処理できる形に修正します。
    以下の【】部分を、取得したタグの内容に置き換えてください。

    [『カラーテーマ』が「カスタム」以外の場合]
    
    /**
     * Add Display Dialog
    **/
    function adds_head(){
           echo '<script type="text/javascript" id="dialogplay-embedded-script"'."\n";
           echo '    src="【スクリプトURL】"'."\n";
           echo '    data-token="【アプリケーショントークン】"'."\n";
           echo '    data-title="【表示タイトル】"'."\n";
           echo '    data-position="【表示位置】"'."\n";
           echo '    data-theme="【カラーテーマ】"'."\n";
           echo '    data-fit-height="【高さ自動調整】"'."\n";
           echo '></script>'."\n";
    }
    
    add_action('wp_head', 'adds_head');
    
    

    [『カラーテーマ』が「カスタム」の場合]
    
    /**
     * Add Display Dialog
    **/
    function adds_head(){
           echo '<script type="text/javascript" id="dialogplay-embedded-script"'."\n";
           echo '    src="【スクリプトURL】"'."\n";
           echo '    data-token="【アプリケーショントークン】"'."\n";
           echo '    data-title="【表示タイトル】"'."\n";
           echo '    data-position="【表示位置】"'."\n";
           echo '    data-theme="【カラーテーマ】"'."\n";
           echo '    data-colors=\'【各項目カラー情報】}\''."\n";
           echo '    data-fit-height="【高さ自動調整】"'."\n";
           echo '></script>'."\n";
    }
    
    add_action('wp_head', 'adds_head');
    
    
    名称 説明
    スクリプトURL
    タグの「src=」内の値
    アプリケーショントークン
    タグの「data-token=」内の値
    表示タイトル
    タグの「data-title=」内の値
    表示位置
    タグの「data-position=」内の値
    カラーテーマ
    タグの「data-theme=」内の値
    各項目カラー情報
    タグの「data-colors=」内の値
    {"header""font":"#〇〇〇〇〇〇"} までの部分を貼り付け
    ※ 『カラーテーマ』で「カスタム」を選択した場合のみ
    高さ自動調整
    タグの「data-fit-height=」内の値

  2. WordPressインストールディレクトリ >/wp-content/themes/< 利用中のテーマディレクトリ >内の「functions.php」を、テキストエディタで開いてください。
    functions.phpは編集ミスにより、画面の表示がされなくなる場合もあるため、必ずバックアップを取り、細心の注意を払って編集してください。

  3. functions.phpの最後に、手順1で作成したソースを追加してください。
    ※ タイトルに日本語が含まれている場合、文字化けの原因となるため、必ず文字コード「UTF-8」で保存してください。

    [『カラーテーマ』が「カスタム」以外の場合]

    [『カラーテーマ』が「カスタム」の場合]

  4. ブラウザで動作を確認してください。
Last updated on 2019/03/12.