セットアップガイド | ウレシニア Webサポート

準備するもの

導入するサイトのHTMLを編集できる権限、または Google タグマネージャー（GTM）の公開権限
管理者として登録するメールアドレス（確認メールと二要素認証のコードが届きます）
接続テスト用のスマートフォンかパソコン（利用者役）と、担当者役のパソコン

利用者側のアカウント登録やアプリのインストールは不要です。電話の設備もそのまま使えます。

1. アカウントを作成する

会社・担当者の登録で、会社名・お名前・メールアドレスを入力します。
届いたメールのリンクを開き、パスワードを設定します。
二要素認証の方法を選びます。メールの確認コード（おすすめ）か認証アプリのどちらかです。
表示される回復コードを、ほかの人が見られない場所に保管します。

最初に登録した人が、その会社の管理者になります。料金プランは30日間の無料トライアルから始まり、カードの登録は不要です。

2. サイトを登録する

ログイン後、導入設定の「導入セットアップ」を開きます。
サイト名と、サイトのURL（例：https://www.example.com）を入力して「サイトを登録」を押します。
登録すると、そのサイト専用のタグが表示されます。

URLは「https://」からドメインまで（ポート番号を含む）が完全に一致するページだけで動きます。example.com と www.example.com は別のサイトとして、それぞれ登録してください。

まず動きを見たい場合は「この環境にテストサイトを作る」を押すと、ウレシニア Webサポート上のテストページで接続を試せます。

3. タグを設置する

A. HTMLに直接書く

サイト全体で共通のテンプレートの </body> の直前に、導入設定に表示されたタグを貼り付けます。

<script async src="https://uresenior.com/yorisoi.js"
  data-project="（導入設定に表示されるサイトID）"></script>

B. Google タグマネージャーで設置する

GTMで新しいタグを作り、種類に「カスタムHTML」を選びます。
上と同じタグを貼り付け、トリガーに「DOM Ready（すべてのページ）」を設定します。
プレビューで、ページ上部に「サポートをお願いする」が表示されることを確かめてから公開します。

C. 外部スクリプトの読み込みを制限しているサイト

サイトが Content Security Policy（CSP）で読み込み先を制限している場合は、次の許可が必要です。

script-src  https://uresenior.com
connect-src https://uresenior.com

CSPを変更できない場合でも、インラインスクリプトが許可されていれば、SDKの本体をGTMのカスタムHTMLに直接組み込む方法で導入できます。この方法ではSDKが自動で更新されないため、更新のたびに貼り直しが必要です。設置代行をご希望の場合はお問い合わせください。

英語で表示する

利用者向けの表示を英語にするには data-lang="en"、閲覧者のブラウザの言語に合わせるには data-lang="auto" をタグに追加します。

<script async src="https://uresenior.com/yorisoi.js"
  data-project="…" data-lang="auto"></script>

4. 共有・操作する項目を指定する

初期状態では、入力欄の値は担当者に共有されず、担当者は操作もできません。サイトのHTMLに次の属性を付けて、共有・操作してよい項目を指定します。

属性	意味
`data-yorisoi-control="true"`	担当者が入力・選択・クリックできる要素。入力欄の値は、この属性を付けた項目だけ共有します。
`data-yorisoi-private`	共有しない領域。中の文章・入力欄は担当者に表示しません。個人情報を文章で表示する場所に付けます。
`data-yorisoi-final`	申し込み・購入などの最終確定ボタン。原則として利用者本人だけが押せます。
`data-yorisoi-step="説明文"`	「一つずつ進める」ガイドで順番に強調する要素。ページ内の順に案内します。

<label>お名前 <input name="name" data-yorisoi-control="true"></label>
<button type="button" data-yorisoi-control="true">次へ</button>
<div data-yorisoi-private>会員番号：12345678</div>
<button type="submit" data-yorisoi-final>申し込みを確定する</button>

パスワード・カード情報・ワンタイムパスワード・ファイル選択・非表示の入力欄は、属性にかかわらず共有しません。名前・ラベル・autocomplete から機密項目と判断したものも同様です。ただし、文章として表示される個人情報は自動では隠れないため、data-yorisoi-private を付けてください。

独自のAPIで確定する画面

フォーム送信ではなく、JavaScript から独自のAPIで申し込みや決済を確定する場合は、確定ボタンのクリック処理の最初で次の判定を行い、false なら処理を中止してください。非同期処理を始める前に呼ぶ必要があります。

button.addEventListener('click', (event) => {
  if (window.Yorisoi && !window.Yorisoi.authorizeFinalAction(event)) return;
  submitOrder(); // 独自の確定処理
});

5. 担当者の操作範囲を決める

導入設定の「担当者の操作範囲」で、サイトごとに次の2つを選べます。どちらも初期設定はオフです。

購入・確定ボタンも担当者が押せる：オンにすると、data-yorisoi-final のボタンや送信ボタンを担当者も押せます。
カードの名義は担当者も入力できる：オンにすると、カード名義の欄だけ担当者が入力できます。

カード番号・有効期限・セキュリティコードは、設定にかかわらず担当者には見えません。設定を変えると、利用者が許可する画面の説明文も自動で変わります。

6. サイトのボタンから開く

タグを設置すると、ページ上部に「サポートをお願いする」が表示されます。ヘッダーのアイコンなど、サイトの好きなボタンから開きたい場合は Yorisoi.open() を呼びます。

<button type="button" onclick="window.Yorisoi && window.Yorisoi.open()">
  電話サポート
</button>

接続中にもう一度呼ぶと、新しい番号を発行せずに今の接続の画面を表示します。

7. 接続をテストする

公開前に、実際のページと端末で次の流れを確認してください。

利用者役の端末でページを開き、「サポートをお願いする」を押して6桁の番号を表示します。
担当者役のパソコンで管理画面にログインし、番号を入力して接続を依頼します。
利用者役の端末に企業名と担当者名が表示されることを確かめ、閲覧と操作を許可します。
担当者側で、共有画面・カーソル表示・許可した項目の入力ができることを確かめます。
パスワードや data-yorisoi-private の領域が担当者側に表示されないことを確かめます。
確定ボタンが、操作範囲の設定どおりに動くことを確かめます。
利用者・担当者のそれぞれから終了し、終了後に操作できないことを確かめます。

接続番号の有効期限は10分、許可後の共有は最長30分です。画面の録画は行わず、終了時には共有画面と未反映の操作を消去します。共有画面はページの構造から再現するため、iframe・動画・canvas などは表示されず、見た目が実際と異なる場合があります。

8. 担当者を招待する

管理者は、アカウント設定の「担当者の管理・招待」から担当者のメールアドレスを入力して招待します。
招待された人はメールのリンクから登録し、二要素認証を設定します。
退職などで使わなくなった担当者は、同じ画面から停止できます。

同時に対応できる件数や担当者の人数は、料金プランによって異なります。料金を見る

うまくいかないとき

「サポートをお願いする」が表示されない: data-project のサイトIDが正しいか、登録したURLと実際のページのURL（https・www の有無）が一致しているかを確認してください。GTMの場合は公開済みか、ブラウザに古いタグが残っていないか（強制再読み込み）も確認します。ブラウザの開発者ツールに CSP のエラーが出ている場合は、手順3のCの対応が必要です。
番号を入力しても接続できない: 番号の有効期限（10分）が切れていないか確認し、利用者側で新しい番号を表示してください。ほかの担当者がすでに対応中の場合も接続できません。
担当者が入力・クリックできない: 対象の要素に data-yorisoi-control="true" が付いているか確認してください。確定ボタンは「担当者の操作範囲」がオフのとき、本人しか押せません。
共有画面の見た目が実際と違う: 共有画面はページの構造から再現しています。iframe・動画・canvas などは表示されません。案内に必要な部分が欠ける場合は、導入前にご相談ください。

準備ができたら、導入設定へ。

30日間の無料トライアルで、テストサイトから実際のページまで試せます。

無料で始めるログインして導入設定へ

ウレシニア Webサポートを自社のWebサイトに導入する手順。