DialogPlayで作成したチャットボットをWebサイト上で利用することができます。
WordPressを使用してWebサイトを作成する場合、【WEBサイトに公開】と同様に各ページにタグを埋め込む方法と、本手順のようにPHPテンプレートにタグを埋め込む方法の2通りがあります。
公開設定
- 【WEBサイトに公開 ー 公開設定】と同様に公開設定を行い、『埋め込みチャットタグ』内の“コピー“ボタンをクリックして、タグの内容をコピーしてください。
WordPressへの埋め込み
- 【公開設定】で取得したタグを、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-chat-call-button="【⑤ボタン種類】"'."\n";
echo ' data-chat-call-button-image=\'【⑥ボタン画像URL】\''."\n"; echo ' data-theme="【⑦カラーテーマ】"'."\n";
echo ' data-colors=\'【⑧各項目カラー情報】}\''."\n";
echo ' data-font-size="【⑨フォントサイズ】"'."\n"; echo ' data-fit-height="【⑩高さ自動調整】"'."\n"; echo '></script>'."\n"; } add_action('wp_head', 'adds_head');No. 項目名 説明 1 スクリプトURL タグの「src=」””内の値 2 アプリケーショントークン タグの「data-token=」””内の値 3 表示タイトル タグの「data-title=」””内の値 4 表示位置 タグの「data-position=」””内の値 5 ボタン種類 タグの「data-chat-call-button=」””内の値 6 ボタン画像URL タグの「data-chat-call-button-image=」””内の値
https:// ～ launcher_image までの部分を貼り付け
※ 『チャット呼び出しボタン』で「カスタム画像」を選択した場合のみ7 カラーテーマ タグの「data-theme=」””内の値 8 各項目カラー情報 タグの「data-colors=」’””内の値
{"header" ～ "font":"#〇〇〇〇〇〇"} までの部分を貼り付け
※ 『カラーテーマ』で「カスタム」を選択した場合のみ9 フォントサイズ タグの「data-font-size=」””内の値 10 高さ自動調整 タグの「data-fit-height=」””内の値 - ＜WordPressインストールディレクトリ＞/wp-content/themes/＜利用中のテーマディレクトリ＞内の「functions.php」を、テキストエディタで開いてください。
functions.phpは編集ミスにより、画面の表示がされなくなる場合もあるため、必ずバックアップを取り、細心の注意を払って編集してください。
- functions.phpの最後に、手順1で作成したソースを追加してください。
※ タイトルに日本語が含まれている場合、文字化けの原因となるため、必ず文字コード「UTF-8」で保存してください。
- ブラウザで動作を確認してください。