Erstellen komplexerer Launcher

Kurzübersicht

Werden Sie Experte als DAP-Ersteller und erfüllen Sie die gewünschten Erstellungsanforderungen. Der folgende Artikel erklärt, wie Sie die drei am häufigsten verlangten Launcher-Optionen meistern.

Erstellen eines blinkenden Launchers

  1. Klicken Sie auf „Customize“ (Anpassen)
  2. Klicken Sie auf die Registerkarte „CSS“
  3. Fügen Sie den folgenden Text in den unteren Teil Ihres CSS ein und ersetzen Sie die x mit der ID Ihres Launchers. Sie finden das, indem Sie den Mauszeiger über die 3 vertikalen Punkte neben Ihrem Launcher bewegen und auf „Copy ID“ klicken
    .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 {
     von {
     transform: scale(1.0);
     opacity: 1;
     }
     bis {
     transform: scale(1.5);
     opacity: 1;
     }
    }

Erstellen eines unsichtbaren Launchers

Anwendungsfall: Blockieren einer Schaltfläche, um eine Aktion gemäß bewährten Verfahren zu verhindern. Sie können damit einen Smart Walk-Thru starten oder einfach nichts tun.

  1. Klicken Sie auf der Registerkarte Design des Launchers auf das Symbol Vorlage bearbeiten

  2. Benutzerdefinierter Design-Bildschirm wird geöffnet
  3. Klicken Sie auf Unsichtbar machen


Erstellen einer konstanten Sprechblase

Eine Sprechblase bleibt auf dem Bildschirm, während der Walk-Thru fortfährt.

Anwendungsfall: Sie möchten, dass eine allgemeine Sprechblase auf dem Bildschirm bleibt, während der Benutzer ein Formular ausfüllt.

  1. Erstellen Sie eine Sprechblase mit dem gewünschten Text und Design.
  2. Verwandeln Sie die Sprechblase in ein Bild (Bildschirm ausdrucken, in Paint einfügen und bearbeiten – auf S3 speichern und hochladen).
  3. Fügen Sie das Bild als einen Launcher hinzu. Und platzieren Sie es, wo Sie die Sprechblase platzieren möchten.
  4. Erstellen Sie einen WM-Festpunkt an der Stelle, an der die Sprechblase auf dem Walk-Thru erscheinen soll.
  5. Fügen Sie den gleichen WM-Festpunkt hinzu, der den vorherige überschreibt, wenn die Sprechblase verschwinden soll.
  6. Segmentieren Sie den „Sprechblasen-Launcher“ so, dass er nur erscheint, wenn die WM-Datei vorhanden ist.
  7. Lassen Sie den Launcher Segmentierungen überprüfen (Segmentierungshäufigkeit).

Einen Launcher drehen/schwenken

Um Ihren Launcher schräg anzuzeigen, verwenden Sie das Global CSS.

  1. Überprüfen Sie Ihren Launcher und kopieren Sie seine Anmeldeinformationen: walkme-launcher-id-xxxxxxx
  2. Öffnen Sie im Editor Settings -> Edit global CSS
  3. Verwenden Sie auf der Registerkarte CSS die folgende Syntax:
    .walkme-launcher-id-xxxxxxx {
    
    transform: skew(Xdeg) !important;
    
    }
    Beispiel:
    .walkme-launcher-id-123456 {
    
    tranform: skewX(10deg) !important;
    
    }
  4. Weitere Syntaxbeispiele für die Eigenschaften skew() und rotate() „transform“ (transform) finden Sie in den folgenden Artikeln:
    skew()
    rotate()

Aktualisieren Sie das Design vom benutzerdefinierten Launcher.

Anwendungsfall: Sie möchten einige benutzerdefinierte Launcher gleichzeitig aktualisieren, anstatt jeden einzelnen separat zu öffnen, um Zeit zu sparen.

  1. Erstellen Sie einen Test-Launcher auf einem zufälligen Element auf der Seite.
  2. Klicken Sie, um den Launcher zu ändern.
  3. Sobald Sie sich im Auswahlmenü aller Ihrer benutzerdefinierten Launcher befinden, können Sie sie nacheinander aktualisieren, ohne den aktuellen Launcher zu speichern, an dem Sie arbeiten.
  4. Nachdem Sie alle Launcher aktualisiert haben, können Sie den von Ihnen bearbeiteten Test-Launcher einfach abbrechen – alle Änderungen werden in Ihren benutzerdefinierten Launchern gespeichert.

Verstecken Sie das Hand-Symbol, damit es den unsichtbaren Launcher nicht blockiert

Deaktivieren Sie das Widget und verwenden Sie stattdessen einen Launcher

  1. Schalten Sie das Widget aus, indem Sie zu Anpassen > Player anpassen > Widget gehen und die Anzeige auf Keine setzen:
  2. Als Nächstes machen Sie einen Launcher, um das Menü zu öffnen. Dazu können Sie die Launcher-App im Editor öffnen und den Launcher anbringen, wo er in Ihrer Anwendung erscheinen soll.
  3. Additionally, you can choose what you want your Menu Launchers by going to Launcher Options -> Interaction -> Change Launcher. Hier können Sie aus den Standardbildern für Launcher wählen, Ihr eigenes Bild hochladen oder ein Launcher-Bild im Editor erstellen.
  4. Zuletzt konfigurieren Sie auf der Registerkarte „Interaction“ die Aktion mit „Open Menu“ (Menü öffnen). Sie können auch entscheiden, welche Registerkarte sichtbar sein soll, wenn Ihre Benutzer das Menü zum ersten Mal öffnen:

Verwandeln Sie einen Launcher in ein Bild

Fügen Sie den folgenden CSS-Code zu Ihrem Global CSS im Editor hinzu:

.walkme-launcher-id-xxxxx {

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

padding-top: 24px;

padding-right: 2px;

padding-bottom: 18px;

padding-left: 1px;

}

Das Bild weiter unten zeigt Ihnen ein Beispiel.

Ersetzen Sie in jedem Fall die URL mit dem Bild Ihrer Wahl und die xxx mit Ihrer Launcher-ID. Folgen Sie diesen Schritten, um die eindeutige ID des Launchers zu finden:

  1. Lassen Sie den Mauszeiger über den 3 vertikalen Punkten rechts vom Launcher schweben
  2. Klicken Sie im Dropdown-Menü auf „Copy ID“ (ID kopieren).

Ausblenden von Elementen auf Ihrer Website mit Launchers

Erstellen Sie einen 3D-Effekt-Launcher

Hinzufügen von Animationen und Spezialeffekten zu Launchers

Weitere Tipps finden Sie in den Launchers Tipp dienstags Videos.

War dies hilfreich?

Vielen Dank für Ihr Feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×