概要

社内でTeachMeを使用している場合でも、社外のユーザーがウェブサイトや製品で最高のエクスペリエンスを得られるように支援している場合でも、ユーザーがTeachMeにアクセスできるようにする必要があります。

この記事では、WalkMeメニューを使用してTeachMeエクスペリエンスを起動する方法について確認します。 メニューは、TeachMeのコースなど、最も重要なアイテムを保存するのに最適な場所です。 ユーザーは、必要なときに必要なトレーニングに簡単にアクセスできます。

メニューがまだありませんか？ ご心配なく！ 簡単です。 こちらの記事をご確認ください： メニューオーガナイザー

運用開始の流れ

WalkMeメニューからティーチミーを開くには、3つの方法があります：

1. メニューフッターにランチャーを追加します
   メニューにティーチミーを開く専用ボタンを追加したい場合は、このオプションを使用してください。
2. メニューにスマートウォークスルーを追加します
   ティーチミーをメニューリストで項目として表示したい場合は、このオプションを使用します。
3. ティーチミープレーヤーAPIを使用します
   開発者がいて、ティーチミーが開くタイミングをより詳細に制御する必要がある場合は、このオプションを使用してください。

オプション1と2では、jQueryセレクターを使用します。 以下のステップで、必要なセレクターを提供します。

ランチャーをメニューフッターに追加

ランチャーを選択した場合は、メニューのフッターに追加することをお勧めします。 これは一般的に最もスペースがあるエリアです。 ただし、ランチャーをメニューの別の場所に追加したい場合は、jQueryスニペットを検索して以下のものを置き換えることができます。

メニューにランチャーを追加するには：

ステップ1：ランチャーを作成する

1. エディターから、大きな青色の「+」アイコンでランチャーを作成します。
2. サイト上のものをキャプチャします（場所は後で変更します）。
3. ［Save（保存）］をクリックします。

Launchers: Getting Started Guide

ステップ2：jQueryを挿入

1. エディターで、ランチャーをクリックしてランチャーオプション画面を開きます。
2. インタラクション>アクションに移動します。
3. ドロップダウンから［Open Courses Menu（コースメニューを開く）］を選択します。
4. ランチャーオプションページで、［Selected Element（選択したエレメント）］タブに移動します。
5. エレメントの動作の下、ユーザーアクションの結果として表示または非表示を選択します
6. 「エレメントを識別する方法を定義」で、［jQuery Selector（jQueryセレクター）］を選択します。

jQueryセレクターフィールドに「#walkme-footer」と入力します（メニューの別の場所にしたい場合は、ここにjQueryを追加します）。

ステップ3：ランチャー設定の外観を変更する

1. 外観の位置に移動します。>
2. ［Launcher Setting（ランチャー設定）］で、［Inner（内側）］と左矢印を選択します（これにより、メニューの左下にランチャーが配置されます）。

ステップ4：Zインデックスを変更

1. ［Appearance（外観）］タブで、［Arrange Layer Order（レイヤー順序を整理）］に移動します。
2. Zインデックスをオンにします。
3. 「手動でz-indexの値を定義」で、「2147483647」と入力します。
4. ［Save（保存）］をクリックします。

完了しました

準備ができたら、このランチャーを公開するとランチャーがメニューに表示されます。 ランチャーをカスタマイズするには、 ランチャーの記事に移動します。

自動ステップでスマートウォークスルーを追加

メニューに独立したボタンがあるのはあなたのスタイルに合っておらず、 メニューの他のアイテムのリストにTeachMeエクスペリエンスを追加したい。 このような場合、コースメニューを開く自動ステップで、超シンプルなスマートウォークスルーを作成します。 始めましょう。

スマートウォークスルーの自動ステップを追加するには：

ステップ1：スマートウォークスルーを作成する

1. エディターから、大きな青色の「+」アイコンでスマートウォークスルーを作成します。
2. オレンジ色の「+」をクリックし、［Auto Step（自動ステップ）］を選択してスマートウォークスルーを開始します。
3. エレメントを選択します（後で場所を変更します）。
4. アクションドロップダウンで、［Click（クリック）］を選択したままにします。
5. ［Done（完了）］をクリックします。

ステップ2：jQueryを挿入

1. エディターに戻り、［Auto Step you created（作成済みの自動ステップ）］をクリックします。
2. ［Selected Element（選択したエレメント）］タブに移動します。
3. 「エレメントを識別する方法を定義」で、［jQuery Selector（jQueryセレクター）］を選択します。
4. jQueryセレクターに「#walkme-player-panel」と入力します（選択したランダムなエレメントをクリックする代わりにメニューを開きます）。
5. ［Done（完了）］をクリックします。

ステップ3：メニューオーガナイザーにスマートウォークスルーを追加

1. WalkMeコンソール（console.walkme.com/menu）で［Menu Organizer（メニューオーガナイザー）］に移動します。
2. アイテムリストで、新しいスマートウォークスルーを検索し、メニューの好きな場所にドラッグします。
3. ［Save（保存）］をクリックします。

完了です！

スマートウォークスルーと自動ステップの詳細については、こちらの記事をご覧ください。

ティーチミープレーヤーAPIを使用して、ティーチミーを開きます

開発者は、カスタムJavaScriptでティーチミーを開くことができます。 エディターのオプションで必要な動作がカバーできない場合は、このオプションを使用してください。

ティーチミーを開くには、次のコマンドを呼び出してください：

TeachMePlayerAPI.toggleMenu()

このコマンドは、ティーチミーメニューを切り替えます。 この機能は、閉じている場合はティーチミーを開き、開いている場合は閉じます。