チャットボットを公開する

公開方法の概要

チャットボットを公開するには、ウェブサイトへ埋め込む方法と単体Webページとして公開する方法の2つがあります。

ウェブサイトへ埋め込む方法

ボタンをクリックして表示させたい場合

チャットボットの詳細設定画面の右上にある「埋め込み」ボタンをクリックします。

以下のコピーをクリックしてタグをコピーし, 埋め込みたいサイトへ貼り付けてください。

画面の中央にポップアップ表示したい場合

チャットボットの詳細設定画面の右上にある「埋め込み」ボタンをクリックします。

以下のコピーをクリックしてタグをコピーし, 埋め込みたいサイトへ貼り付けてください。

上記のタグの直後に、以下のコードも埋め込みサイトへ貼り付けてください。

<script>
        (function () {
            var css = [
                '.helpbot-chat-container {',
                '  left: 15vw !important;',   /* 画面幅の左右15%ずつを余白に → 横幅70% */
                '  right: 15vw !important;',
                '  width: 70vw !important;',
                '  top: 50% !important;',     /* 縦方向も中央 */
                '  bottom: auto !important;',
                '  height: 80vh !important;',
                '  max-height: 80vh !important;',
                '  transform: translateY(-50%) !important;',
                '}'
            ].join('\n');

            function inject() {
                var host = document.querySelector('[data-helpbot-widget]');
                if (!host || !host.shadowRoot) return false;
                if (host.shadowRoot.querySelector('style[data-custom-layout]')) return true;
                var style = document.createElement('style');
                style.setAttribute('data-custom-layout', '');
                style.textContent = css;
                host.shadowRoot.appendChild(style);
                return true;
            }

            // ウィジェットは非同期で描画されるため Shadow root が出来るまでポーリング
            if (!inject()) {
                var timer = setInterval(function () {
                    if (inject()) clearInterval(timer);
                }, 200);
                setTimeout(function () { clearInterval(timer); }, 15000);
            }
        })();
    </script>

単体Webページとして公開する方法

新しく作成した時点で公開状態となっております。以下の「公開ページ」ボタンより単体Webページへアクセスいただけます。

※ 非公開や限定公開とした場合はこちらのヘルプもあわせてご覧ください。