Top
Eines Bildes in ein Pop-up einsetzen
  • 10 Sep 2024
  • 5 Minuten zu lesen
  • Dunkel
    Licht
  • pdf

Eines Bildes in ein Pop-up einsetzen

  • Dunkel
    Licht
  • pdf

Artikel-Zusammenfassung

Whatfix ermöglicht es Ihnen, Bilder in einer Pop-up-Vorlage durch Hinzufügen einer URL einzubetten. Jedes Bild, das Sie in einem Pop-up einsetzen möchten, muss zuerst auf dem Whatfix-Dashboard oder auf einer Online-Bildfreigabe-Webseite wie Google Drive oder Dropbox gehostet werden. Nachdem die Bilder gehostet sind, verwenden Sie die Bild-URL, um ein Bild zu Ihrem Pop-up hinzuzufügen. Die Verwendung von Pop-ups mit Bildern im Spiegel verbessert das Verständnis und das Benutzerengagement.

Whatfix ermöglicht es Ihnen, Bilder von Ihrer lokalen Festplatte hochzuladen, wenn die Vorlage das Bildformat unterstützt.

Note
  • Stellen Sie sicher, dass Sie die URL des Bildes haben, bevor Sie fortfahren.
  • Es werden nur die Bildformate .jpeg, .jpg, .gif und .png mit einer Größe von bis zu 10 MB unterstützt.
  • Mit Whatfix können Sie bis zu 100 Bilder und Videos von Ihrem lokalen Laufwerk hochladen und in Ihren Pop-ups verwenden. Sobald dieses Limit erreicht ist, sehen Sie möglicherweise eine Fehlermeldung. Sie können diese Grenze jedoch erhöhen, indem Sie sich an support@whatfix.com wenden.

Whatfix ermöglicht Ihnen das Einsetzen eines Bildes in ein Pop-up auf eine der folgenden drei Arten:

Ein Bild mit dem Visual Editor einsetzen

your title goes here
  • Visual Editor ist ein Beta Eigenschaft. Um die Eigenschaft zu aktivieren, kontaktierien Sie support@whatfix.com.
  • Sobald Sie dem Visual Editor aktiviert haben, können Sie nicht mehr zur alten Version zurückkehren.
  • Sobald den Visual Editor aktiviert ist,können Pop-ups nur noch mit Whatfix Studio und nicht mehr über das Dashboard erstellt werden.
  • Nachdem Sie Pop-ups mit dem Visual Editor erstellt haben, können Sie sie über das Whatfix-Dashboard bearbeiten.
  • Sie können nur die Sichtbarkeitsregeln von Pop-ups bearbeiten, die nicht mit dem Visual Editor erstellt wurden, und sie nicht weiter anpassen.

Visual Editor ermöglicht es Ihnen, ein Bild in einer Pop-up-Vorlage direkt über die UI einzusetzen, ohne den JSX-Code bearbeiten zu müssen.

Verwenden Sie die folgenden Schritte, um ein Bild in einem Pop-up mit dem Visual Editoreinzusetzen:

  1. Melden Sie sich bei der Anwendung an, in der Sie Inhalte erstellen möchten, und starten Sie dann den Whatfix Studio.
    CLM_editor plug in2

  2. Auf dem Whatfix Studio, klicken Sie Pop-up.
    RB_EDT_Clickpopup

  3. Wählen Sie in der Dropdown-Liste Thema das gewünschte Farbthema aus.
    RB_EDT_popupthemes

Note

Sie können auch Ihre eigene Farbe verwenden, indem Sie den Hex-Farbcode in das Textfeld eingeben.

  1. Wählen Sie eine der Pop-up-Vorlagen aus, zum Beispiel Funktion Onboarding.
    Selecttemplate

  2. Klicken Sie den Platzhalter, um die Image Froala Toolbar zu öffnen.
    imagefroalatoolbar

  3. Klicken Sie das + Symbol.
    clickaddcomponentnew

  4. Klicken Sie im Dialogfeld Komponente hinzufügen auf Bild.
    clickimage

  5. Sie können die URL des Bildes, das Sie einfügen möchten, einsetzen oder ein Bild von Ihrem lokalen Laufwerk oder der Whatfix Galerie hochladen.
    clickaddimg

your title goes here
  • Die Bild-URL muss https enthalten, wenn das Pop-up auf einer sicheren Webseite angezeigt wird.
  • GIFs können auch über das Bilddialogfeld selbst hinzugefügt werden.
  • Es werden nur die Bildformate .jpg und .png mit einer Größe von bis zu 4 MB unterstützt.
  1. Klicken Sie Einsetzen.
    clickinsert

  2. Das Bild wird im Pop-up hinzugefügt.

your title goes here

clickimageresize

your title goes here
  • Mit der Ziehen und Ablegen Funktion können Sie das Bild um das Pop-Up verschieben/neu positionieren.
    • Mit den Drag-Handlern kann das Bild sowohl vertikal (spaltenweise) als auch horizontal (zeilenweise) verschoben/neu positioniert werden.

ImageDND

your title goes here

Wann Sie Änderungen am Pop-up mit Hilfe der Drag Handlers vornehmen, können Sie bestimmte Änderungen leider nicht rückgängig machen. In diesem Fall müssen Sie das Pop-up möglicherweise neu erstellen.

  1. Beenden Sie die Erstellung des Pop-up und klicken Sie Popup speichern.
    clicksave
your title goes here

Sie können ein Bild auch nach dem Erstellen in eine Pop-up Vorlage einsetzen/bearbeiten, indem Sie das Bearbeiten Symbol im Dashboard verwenden.
resizepopupDB

Ein Bild mit vorhandenen Vorlagen einsetzen

Verwenden Sie die folgenden Schritte, um ein Bild mit Hilfe der Pop-up-Vorlagen einzusetzen, die Bildfelder unterstützen:

  1. Auf dem Whatfix Guidance Dashboard, klicken Sie Widgets.
    ia_left_nav_widgets

  2. Klicken Sie Pop-ups.
    ia_widget_popups

  1. Klicken Sie Widget erstellen.
    CLMDBCreateWidget.png

  2. Klicken Sie Pop Up.
    CLMDBPop-up

  3. Wählen Sie eine Vorlage aus, die einen Bildplatzhalter hat, z. B. Funktion Onboarding.
    2023-04-1212-53-03.png

  4. Klicken Sie den Platzhalter für das Bild. Das Dialogfeld Bild einsetzen wird geöffnet.
    2023-04-1314-11-53.png

  5. Klicken Sie auf das Symbol Bild.
    2023-04-1212-59-52.png

  6. Sie können die URL des Bildes, das Sie einfügen möchten, einsetzen oder ein Bild von Ihrem lokalen Laufwerk hochladen.
    2023-04-1213-07-02.png

your title goes here
  • Die Bild-URL muss https enthalten, wenn der Pop-up auf einer sicheren Webseite angezeigt wird.
  • GIFs können auch über das Bilddialogfeld selbst hinzugefügt werden.
Bild über vorhandene Vorlagen einsetzen

Gehen Sie wie folgt vor, um mit den Pop-up-Vorlagen, die Bildfelder unterstützen, ein Bild einzufügen:

  1. Auf dem Whatfix Guidance Dashboard, klicken Sie Widgets.
    ia_left_nav_widgets

  2. Klicken Sie Pop-ups.
    ia_widget_popups

  1. Klicken Sie Widget erstellen.
    CLMDBCreateWidget.png

  2. Klicken Sie Pop Up.
    CLMDBPop-up

  3. Wählen Sie eine Vorlage aus, die einen Bildplatzhalter hat, z. B. Funktion Onboarding.
    2023-04-1212-53-03.png

  4. Klicken Sie den Platzhalter für das Bild. Das Dialogfeld Bild einsetzen wird geöffnet.
    2023-04-1314-11-53.png

  5. Klicken Sie auf das Symbol Bild.
    2023-04-1212-59-52.png

  6. Sie können die URL des Bildes, das Sie einfügen möchten, einsetzen oder ein Bild von Ihrem lokalen Laufwerk hochladen.
    2023-04-1213-07-02.png

your title goes here
  • Die Bild-URL muss https enthalten, wenn das Pop-up auf einer sicheren Webseite angezeigt wird.
  • GIFs können auch über das Bilddialogfeld selbst hinzugefügt werden.
  1. Beenden Sie die Erstellung des Pop-ups.

Bild mit dem Rich Text Editor einsetzen

Anstatt direkt eine Vorlage mit einem Bildplatzhalter zu verwenden, können Sie ein Bild in der Beschreibung des Popups oder in einer Vorlage hinzufügen, in der der Platzhalter nicht verfügbar ist. Mit dem Rich Text Editor können Sie Bilder zwischen Text, in Beschreibungen oder in Vorlagen ohne bereits vorhandene Bildplatzhalter einfügen.

Gehen Sie wie folgt vor, um mit dem Rich Text Editor ein Bild in ein Pop-up einsetzen:

  1. Auf dem Whatfix Guidance Dashboard, klicken Sie Widgets.
    ia_left_nav_widgets

  2. Klicken Sie Pop-ups.
    ia_widget_popups

  3. Schweben Sie den Mauscursor über das Pop-up-Segment, das Sie konfigurieren möchten, und klicken Sie dann auf das Symbol Bearbeiten.
    CLM_DB_Click_edit_icon.png

  1. Platzieren Sie den Cursor im Abschnitt Beschreibung an der Stelle, an der Sie das Bild einfügen möchten, und verwenden Sie die Abkürzung command + P (Mac) oder CTRL + P (Windows), um das Dialogfeld Bild einsetzen zu öffnen.
    image.png

  2. Kopieren Sie die URL des Bildes aus dem Whatfix Dashboard oder von einer Website zur gemeinsamen Bildnutzung und fügen Sie die URL ein.
    image.png

your title goes here

Die Bild-URL muss https enthalten, wenn das Pop-up auf einer sicheren Webseite angezeigt wird.

  1. Beenden Sie die Erstellung des Pop-ups.


War dieser Artikel hilfreich?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.