概要

DAPビルダーのエキスパートになり、自分が求める構築要件を実現させましょう。 次の記事では、最も要望の多かったLauncherの構築オプション、トップ3を実現する方法を説明します。

Launcherを作成する

1. ［Customize（カスタマイズ）］をクリックします
2. ［CSS］タブをクリックします
3. 以下のテキストをCSSパネルの下部に貼り付け、xの部分をLauncherのIDに置き換えます。 ランチャーの横にある縦の3つの点にカーソルを合わせて「copy ID（IDをコピー）」をクリックするとランチャーのIDを取得できます。

   .walkme-launcher-id-xxxxxx .walkme-launcher-image-div {
    animation：scale-pulse 1.75s cubic-bezier(.39,.58,.38,.75) normal infinite forwards;
   }
   
   @keyframes scale-pulse {
    from {
    transform：scale(1.0);
    opacity：1;
    }
    to {
    transform：scale(1.5);
    opacity：1;
    }
   }

目に見えないランチャーの作成

ユースケース：ベストプラクティスに従ってアクションを防ぐためにボタンをブロックします。 これを使用してSmart Walk-Thruを開始するか、あるいは単に何もしないように設定できます。

1. ランチャーのデザインタブで、テンプレートの編集アイコンをクリックします

   

2. カスタムデザイン画面が開きます
3. [非表示にする]をクリックします

   
   

定数バルーンの作成

ウォークスルーが継続している間、バルーンは画面上に残ります。

ユースケース：ユーザーがフォームを記入している間、一般的なバルーンを画面上に表示させたいです。

1. テキストとデザインでバルーンを作成します。
2. バルーンを画像に変換します。(ペイントで画面を印刷-貼り付け、編集-S3にアップロード)。
3. ランチャーとしてイメージを追加します。 そして、バルーンを見つけた場所を見つけます。
4. ウォークスルーにバルーンを表示させるWM-Dataを作成します。
5. バルーンを消したい場所に、前を上書きする同じWM-Dataを追加します。
6. WM-Dataが存在する場合にのみ、「バルーンランチャー」をセグメント化して表示します。
7. ランチャーでセグメンテーション（セグメンテーション頻度）を確認します。

ランチャーを回転/スキューします。

ランチャーを角度で表示するには、GlobalCSSを使用します。

1. ランチャーを検査し、その資格情報をコピーします。: walkme-launcher-id-xx
2. エディタで、設定を開きます -> GlobalCSSの編集
3. CSSタブで、以下の構文を使用します。

   .walkme-launcher-id-xxxxxxx {
   
   transform： skew(Xdeg) ！important;
   
   }

   例：
   .walkme-launcher-id-123456 {
   
   tranform: skewX(10deg) !important;
   
   }

4. スキュー()および回転()の「変換」プロパティの構文例については、以下の記事を参照してください：
   skew()
   rotate()

カスタムランチャーのデザインを更新します。

ユースケース：時間を節約するために、複数のカスタムランチャーを個別に開くのではなく、一度に更新したい場合。

1. ページ上のランダムな要素にテスト・ランチャーを作成する。
2. クリックしてランチャーを変更します。
3. すべてのカスタムランチャーの選択メニューに入ったら、現在作業中のランチャーを保存することなく、次々とアップデートすることができます。
4. すべてのランチャーをアップデートした後、作業中のテストランチャーをキャンセルするだけで、すべての変更がカスタムランチャーに保存されます。

非表示のLauncherをブロックしないように手のアイコンを隠します

ウィジェットをオフにし、代わりにランチャーを使用します。

1. ウィジェットをオフにするには、カスタマイズ　プレーヤーをカスタマイズ　ウィジェットに移動し、表示をなしにします。
2. 次に、メニューを開くためのLauncherを作成します。 そのためには、EditorでLauncherアプリを開き、アプリケーションの中で表示させたい場所にLauncherを添付します。
3. さらに、Launcherのオプション-インタラクション-Launcherの変更で、メニューLaunchersを選択することができます。 ここでは、デフォルトのランチャー画像から選択するか、自分の画像をアップロードするか、エディタ内でランチャー画像を作成することができます。
4. 最後に、［Interaction（インタラクション）］タブで、［Open Menu（メニューを開く）］というアクションを必ず設定してください。 また、ユーザーが初めてメニューを開いたときに表示させるタブを選択することもできます。
   

ランチャーをイメージに変換します。

EditorでグローバルCSSに以下のCSSを追加します。

.walkme-launcher-id-xx {

background-image: url(url.png) !important;

padding-top: 24px;

padding-right: 2px;

padding-bottom: 18px;

padding-left: 1px;

}

下の画像の例をご覧ください。

URLはお好みの画像に、xxxはランチャーのIDに置き換えてください。 以下の手順に従って、Launcherの一意のIDを確認します。

1. Launcher 右側の縦の3つの点にカーソルを合わせます
2. ドロップダウンから［Copy ID（IDをコピー）］をクリックします。

ランチャーでサイト上のエレメントを非表示にします。

3D効果を持つランチャーの作成

ランチャーにアニメーションと特殊エフェクトを追加します。

より多くのヒントについては、ランチャーのヒント火曜日動画をご覧ください。