チャットの設置ガイド
管理画面で発行した埋め込みコードを、お使いのWebサイトに貼り付けて、チャットを表示するまでの手順です。サイトの管理を制作会社にお任せしている場合は、このページのURLと埋め込みコードを制作会社にお伝えください。
設置の前に
1. 埋め込みコードをコピーする
管理画面の「チャットの設置」を開き、「コードをコピー」を押します。コードは次のような1行です。
<script src="https://cdn.toinavi.com/widget.js" data-widget-key="(施設ごとのID)" async></script>
施設ごとのIDが入っているので、上の例ではなく、必ず管理画面からコピーしたコードを使ってください。
2. 設置先のドメインを確かめる
チャットは、登録したドメインのサイトでだけ動きます。同じ「チャットの設置」の画面で、「設置先のドメイン」にチャットを置くサイトのドメインが入っているかを確かめてください。
- ブラウザのアドレス欄に表示されるとおりに登録します。
www.example.comとexample.comは別のドメインとして扱います。どちらのアドレスでも開けるサイトは、両方を登録してください。 - 登録と変更は、オーナーのアカウントで行えます。
サイトに貼り付ける
お使いのサービスを選んでください。どれを使っているか分からないときは、サイトを作った方や制作会社にお尋ねください。
WordPress
テーマのファイルを直接書き換えると、テーマを更新したときにコードが消えてしまいます。コードを差し込むためのプラグイン「WPCode」(無料)を使う方法をおすすめします。
- WordPressの管理画面で「プラグイン」→「新規追加」を開き、「WPCode」で検索します。
- 「WPCode – Insert Headers and Footers」をインストールし、有効化します。
- 左のメニューの「Code Snippets」→「Header & Footer」を開きます。
- 「Footer」の欄に埋め込みコードを貼り付け、「Save Changes」を押します。
キャッシュ用のプラグインを使っている場合は、貼り付けたあとにキャッシュを削除してください。お使いのテーマに、フッターへコードを追加する欄がある場合は、そちらに貼り付けても構いません。WordPress.com のサービス上で作ったサイトは手順が異なるため、お問い合わせください。
Wix
Wixの案内では、カスタムコードを使うには、サイトを公開し、独自ドメインを接続している必要があります。
- サイトのダッシュボードで「設定」を開きます。
- 「開発・統合設定」の「カスタムコード」を開きます。
- 右上の「+カスタムコードを追加」を押します。
- 欄に埋め込みコードを貼り付け、名前(例:TOINAVI Chat)を付けます。
- 「コードを追加するページを選択」で「全てのコードを読み込む」を選び、「訪問ごとに一度だけ読み込む」を選びます。
- 「コードを追加する箇所を選択」で「ボディ - 最後」を選び、「適用」を押します。
エディタの中ではチャットは動きません。公開中のサイトを開いて確かめてください。
STUDIO
STUDIOのカスタムコードは、有料プランで使える機能です。
- デザインエディタで、画面の外側にあるグレーの余白をクリックします。
- 右のパネルで「サイト」タブを開きます。
- カスタムコードの「<body> 内の末尾」の欄に、埋め込みコードを貼り付けます。
- 「サイトを更新」を押して、公開中のサイトに反映します。
デザインエディタやライブプレビューではチャットは動きません。公開中のサイトを開いて確かめてください。
ペライチ
ペライチのタグ埋め込みは、レギュラープラン・ビジネスプラン・プロフェッショナルプランで使える機能です。設定はページごとに行うので、チャットを表示したいページそれぞれで設定してください。
- マイページで、チャットを表示したいページの「ページ編集」を押します。
- 編集画面で「ページ情報編集」を押します。
- 「タグ埋め込み」の「bodyタグ直下」の欄に、埋め込みコードを貼り付けて保存します。
公開中のページを開いて、チャットが表示されることを確かめてください。
HTMLを直接編集できる場合
チャットを表示したいページのHTMLで、</body> の直前に貼り付けます。全ページに表示する場合は、共通のフッターやテンプレートに1回だけ貼り付けてください。同じページに2回貼る必要はありません。
そのほかのサービス
Webサイトの全ページ(または特定のページ)にコードを追加する機能があれば、設置できます。「カスタムコード」「タグの埋め込み」「トラッキングコード」などの名前で用意されていることが多く、有料プランの機能になっていることがあります。</body> の直前(body の末尾)を選べる場合は、そちらに貼り付けてください。
Googleサイトのように、ページの中に枠として埋め込む方法しかないサービスでは、画面の隅にチャットを表示できません。設置できるか分からないときは、お気軽にお問い合わせください。
チャットが表示されないとき
- 公開中のページで確かめていますか。サービスの編集画面やプレビューの中では、チャットが動かないことがあります。
- 設置先のドメインは合っていますか。
www.の有無まで、アドレス欄の表示と同じである必要があります。 - 古い表示が残っていませんか。ブラウザで再読み込みしてください。WordPressでキャッシュ用のプラグインを使っている場合は、キャッシュを削除してください。
- コードは全部コピーされていますか。
<scriptから</script>まで、1行すべてが貼り付けられているかを確かめてください。
チャットのアイコンが、サイトの画面下部のメニューやボタンに重なる場合は、管理画面の「見た目」で位置を上にずらせます。
それでも表示されない場合は、お問い合わせください。その際、管理画面の「チャットの設置」の下部にあるウィジェットIDと、設置したページのURLをお知らせいただくと、確認がスムーズです。
← TOINAVI Chat トップへ