Top
Login
Inhalt x
Pop-up Vorlagen anpassen
  • 26 Jul 2024
  • 4 Minuten zu lesen
  • Drucken
  • Dunkel
    Licht
  • pdf
Inhalt

Pop-up Vorlagen anpassen

  • Aktualisiert am 26 Jul 2024
  • 4 Minuten zu lesen
  • Drucken
  • Dunkel
    Licht
  • pdf
Artikel-Zusammenfassung

Es gibt zwei Möglichkeiten, Ihre Pop-up-Vorlage anzupassen.

Der einfachste Ansatz ist die Verwendung der visuellen Anpassungsoptionen, die in den Pop-up-Erstellungsbildschirm integriert sind. Die wichtigsten Änderungen können Sie mit den integrierten Anpassungsoptionen durchführen. 

Die andere, fortgeschrittenere Option ist die cOde-Ansicht für detaillierte visuelle Anpassungen, die mit den UI-Optionen nicht möglich sind. Die Codeansicht ermöglicht den Zugriff auf den HTML-, CSS- und Javascript (JSX)-Code der Vorlage, um advanced customization vorzunehmen. Die Codeansicht ist für jede Vorlage verfügbar, die Sie auswählen.

Info:

Bevor Sie Ihre Vorlage anpassen, sollten Sie sie duplizieren, um eine Sicherheitskopie zu erstellen. So können Sie Ihre Änderungen leicht entfernen und einen unerwarteten Verlust von Inhalten vermeiden.

Greifen Sie auf den Code-Editor der Vorlage zu
Passen Sie die Vorlage mit dem Code-Editor an
Anwendungsfälle

Zugriff auf die Detailansicht des Codes der Vorlage

Sie können sowohl ein bereits vorhandenes Pop-up als auch ein neues Pop-up anpassen.

Gehen Sie wie folgt vor, um auf die Codeansicht im Dashboard zu gelangen,

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

   3. Bearbeiten Sie ein bereits vorhandenes Pop-up mit der Schaltfläche Bearbeiten.

     studio_pop-up_edit

Your title goes here
Sie können auch den Code-Editor des Pop-ups beim Erstellen bearbeiten.

   4. Klicken Sie auf das code Ansicht Symbol, um auf den Vorlagencode zuzugreifen.
      studio_pop-up_code db

Note

Sie können jetzt den Code der Vorlage bearbeiten.

      5. Wenn Sie den Code bearbeitet haben, klicken Sie auf die Schaltfläche play, um die Änderungen in der Vorschau zu sehen.
       studio_pop-up__play button db

Die Vorlage über die Codeansicht anpassen

In der Codeansicht können Sie direkt am HTML-Code der Vorlage arbeiten und Änderungen durchführen.

Die Vorlage erlaubt keine eigenständigen Javascript- (JSX) oder HTML-Komponenten. Die Liste der verfügbaren Komponenten finden Sie unten. Kopieren und fügen Sie den entsprechenden JSX und Desktop CSS-Code der Komponente, die Sie verwenden möchten, ein.

KomponenteJSXDesktop CSS
Titel
JavaScript
JavaScript
JavaScript
<WfxTitle id="segment_title_1"
        className="templateTitle"
        titleContent={getRTEContent("segment_title_1")}
        saveListener={contentChangeListener} />
AktionSkript
AktionSkript
ActionScript
.templateTitle {
 margin-left: 5%;
 margin-right: 5%;
 position: relative;
 font-weight: 600;
 font-size: 18px;
 line-height: 25px;
 text-align: center;
 overflow: hidden;
 color: #596377;
 max-height: 100px;
 min-height: 25px;
 width: 90%;
 top: 40px;
}
Beschreibung
JavaScript
JavaScript
JavaScript
<WfxDescription id="segment_desc_1"
        className="templateDescription"
        descContent={getRTEContent("segment_desc_1")}
        saveListener={contentChangeListener} />
AktionSkript
AktionSkript
ActionScript
.templateDescription {
 margin-left: 5%;
 margin-right: 5%;
 position: relative;
 font-weight: normal;
 font-size: 14px;
 width: 401px;
 line-height: 19px;
 text-align: center;
 overflow-y: auto;
 overflow-x: hidden;
 -wrap: break-word;
 color: #6c798e;
 max-height: 235px;
 min-height: 40px;
 width: 90%;
 margin-top: 50px;
}
Schaltfläche
JavaScript
JavaScript
JavaScript
<WfxButton id="segment_prim_btn_1"
            className="wfx_primary_button"
            selectedButtonEvent={getButtonEventType("segment_prim_btn_1")}
            selectedButtonValue={getButtonEventValue("segment_prim_btn_1")}
            buttonStyle={getButtonStyle("segment_prim_btn_1")}
            buttonText={getButtonText("segment_prim_btn_1")}
            buttonHoverColor={getButtonHoverColor("segment_prim_btn_1")}
            buttonCornerRad={getButtonCornerRad("segment_prim_btn_1")}
            buttonColor={getButtonColor("segment_prim_btn_1")}
            buttonChangeListener={updateButton} />
AktionSkript
AktionSkript
ActionScript
.popupBtn {
 background: #f4f5f7;
 border: none;
 color: white;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 14px;
 font-weight: normal;
 width: 136px;
 height: 34px;
 margin-left: 10px;
 border-radius: 3px;
 vertical-align: top;
 outline: none;
 transition: 0.2s ease;
 word-break: break-all;
 overflow: hidden;
}
 
.popupSkipBtn {
 background: #f4f5f7;
 border: none;
 color: #6c798e;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 14px;
 font-weight: normal;
 width: 136px;
 height: 34px;
 margin-right: 10px;
 border-radius: 3px;
 vertical-align: top;
 outline: none;
 transition: 0.2s ease;
 word-break: break-all;
 overflow: hidden;
}
Bild/GIF
JavaScript
JavaScript
JavaScript
<WfxMedia id="segment_image_1"
    className="wfxMedia"
    height={getImageHeight("segment_image_1")}
    width={getImageWidth("segment_image_1")}
    sourceURL={getImageSource("segment_image_1")}
    alternateText={getImageAltText("segment_image_1")}
    video={getisVideo("segment_image_1")}
    imageChangeListener={updateImage} />
AktionSkript
AktionSkript
ActionScript
.wfxImageContainer {
 height: 90px;
 width: 100%;
 margin-top: 50px;
}
 
.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}
Avatarabbildung/GIF/Video
JavaScript
JavaScript
JavaScript
<WfxAvatar id="avatar_1"
        className="Wfx_avatar"
        defaultURL={getImageSource("avatar_1")}
        changeListener={updateImage}
        height={getImageHeight("avatar_1")}
        width={getImageWidth("avatar_1")}
        video={getisVideo("avatar_1")}
        alternateText={getImageAltText("avatar_1")} />
AktionSkript
AktionSkript
ActionScript
.wfxImage {
 height: 100px;
 width: 100px;
 border-radius: 50%;
}
 
.wfxImageContainer {
 height: 100px;
 width: 100px;
 top: -36px;
 position: relative;
 margin: 0 auto;
}
 
.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}
Survey Formular
JavaScript
JavaScript
JavaScript
<WfxSurvey id="survey_1"
    className="wfxSurvey"
    surveyURL={getSurveyURL("survey_1")}
    sourceChangeListener={updateSurvey} />
AktionSkript
AktionSkript
ActionScript
.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.WfxSurveyImage {
    width: calc(100% - 60px);
    height: 100%;
    margin: 30px 30px 25px 30px;
    position: relative;
}

.WfxSurveyFrame {
    margin: 30px 30px 25px 30px;
    height: 418px;
    width: calc(100% - 60px);
    position: relative;
    border-width: 0px;
}
Div box

Eine Komponente zum Rendern eines <div>-Elements als Container. Alle Kinder von WfxDiv werden innerhalb eines <div>

Wir können einen beliebigen Klassennamen dafür definieren und das CSS mit diesem Klassenselektor schreiben.
JavaScript
JavaScript
JavaScript
<WfxDiv className="popupTemplateFooter">
</WfxDiv>
AktionSkript
AktionSkript
ActionScript
<!--JSX -->
<WfxDiv className="popupTemplateFooter">
 
<!--CSS -->
.popupTemplateFooter {
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: center;
  bottom: 15px;
  left: 0;
  right: 0;
}

Anwendungsfälle

Fügen Sie einen zusätzlichen Button hinzu

Wenn Sie einen zusätzlichen Button in dem Pop-up einfügen möchten, können Sie das button-Komponenteverwenden.

1. Kopieren Sie den Code der Schaltflächenkomponente aus der obigen Tabelle.

2. Öffnen Sie die Vorlage Codeansicht.
studio_pop-up_code db

3. Scrollen Sie nach unten zu dem Abschnitt, in dem genau Sie den Button hinzufügen möchten.

4. Einfügen Sie kopierter Code.
Dashboard_Pop-up_Customize_button_code

5. Klicken Sie auf die Schaltfläche Play, um die Schaltfläche hinzuzufügen.
studio_pop-up__play button db

Info:

Falls der zusätzliche Button nicht passt, versuchen Sie die Größe der Pop-up-Breite zu ändern.

6. Passen Sie schließlich die Button-Farbe, Beschriftung und Größe an.
studio_Pop-up_Button_Configuration

Erhöhen Sie die Zeichenbeschränkung für Button

Standardmäßig sind den Button in Whatfix-Popup-Vorlagen mit bis zu 15 Zeichen zulässig. Sie können die Zeichenbegrenzung erhöhen, indem Sie den Parameter charlimit in die entsprechende Schaltflächenkomponente aufnehmen.

1. Öffnen Sie die Vorlagencodeansicht.
studio_pop-up_code db

2. Scrollen Sie nach unten zum Abschnitt der Schaltflächenkomponente, für den Sie die Zeichenbeschränkung erhöhen möchten.

3. Fügen Sie den Parameter charlimit gefolgt von dem Wert hinzu, wie in der Abbildung unten gezeigt.
studio-popup-button-label

4. Klicken Sie auf die Schaltfläche Play.
studio_pop-up__play button db

5. Klicken Sie Speichern, um die Änderungen der Zeichenbeschränkung zu speichern.
studio_edit carousel_save

6. Klicken Sie im Popup Window auf die Schaltfläche Bearbeiten und ändern Sie die Beschriftung der Schaltfläche basierend auf der aktualisierten Zeichenbeschränkung.
studio_pop-up_edit

Hinzufügen Sie von Surveyformularen zu einer beliebigen Popup-Vorlage

Standardmäßig können Sie Surveyformulare nur mithilfe der Vorlage Surveyn/Meinungen in das Pop-up einbetten. Mit der Surveyformularkomponente können Sie jedoch Surveyformulare in eine beliebige Vorlage einbetten.

1. Kopieren Sie den Code survey form component aus der obigen Tabelle.

2. Öffnen Sie die Vorlage Codeansicht.
studio_pop-up_code db

3. Scrollen Sie nach unten zu dem Abschnitt, in dem genau Sie das Surveyformular hinzufügen möchten.

4. Einfügen Sie kopierter Code.
studio_popup_surveycode

5. Klicken Sie auf die Schaltfläche Play, um die Schaltfläche hinzuzufügen.
studio_pop-up__play button db

6. Klicken Sie Einsetzen des Survey-Links und geben Sie die URL des Surveyformulars ein.
clm_pop-up_insert link

Hinzufügen Sie von Text zu einer Vivid Popup-Vorlage

Standardmäßig können Sie einer Vivid Pop-up-Vorlage keinen Text hinzufügen. Aber Sie können dem Template Text hinzufügen, indem Sie die -Beschreibungskomponente einbetten.

1. Kopieren Sie den Code Beschreibung Komponent aus der obigen Tabelle.

2. Öffnen Sie die Vorlage code view.
studio_pop-up_code db

3. Gehen Sie zum Abschnitt im Code, wo Sie den Text hinzufügen möchten.

4. Einfügen Sie kopierter Code.
studio_popup_description code

5. Klicken Sie auf die Schaltfläche Play, um die Komponente hinzuzufügen.
studio_pop-up__play button db

6. Fügen Sie den erforderlichen Text in das angezeigte Textfeld ein.
studio_Pop-up_desc_type something

7. Klicken Sie auf Speichern.
studio_edit carousel_save

Ebenso können Sie mehrere Komponenten mischen und anpassen und Ihre eigene Anpassen Vorlage erstellen. Weitere Informationen finden Sie unter Benutzerdefinierte Pop-up Vorlagen.

War dieser Artikel hilfreich?
What's Next
Privacy Policy | Whatfix Glossar | Whatfix Platform Status
Urheberrecht © 2024 WHATFIX TM. Alle Rechte vorbehalten.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
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.
Logout