Top
Anpassen der Popup-Vorlagen
  • 17 Oct 2023
  • 4 Minuten zu lesen
  • Dunkel
    Licht
  • pdf

Anpassen der Popup-Vorlagen

  • Dunkel
    Licht
  • pdf

Artikel-Zusammenfassung

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

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

Die andere, fortschrittlichere Option besteht darin, den Code-Editor zu verwenden, um detaillierte visuelle Anpassungen vorzunehmen, die mit den Benutzeroberflächeneinstellungen nicht möglich sind. Die Codeansicht ermöglicht den Zugriff auf den HTML-, CSS- und Javascript (JSX)-Code der Vorlage, um erweiterte Anpassungen vorzunehmen. Die Codeansicht ist für jede Vorlage verfügbar, die Sie auswählen.

your title goes here

Bevor Sie Ihre Vorlage anpassen, empfiehlt es sich, die Vorlage zu duplizieren, um eine Sicherungskopie zu erstellen. Auf diese Weise können Sie Ihre Änderungen leicht verwerfen und verhindern jeglichen unerwarteten Inhalteverlust.

Zugriff auf die Code-Ansicht der Vorlage Passen Sie die Vorlage mit der Code-Ansicht an Anwendungsfälle


Zugriff auf die Detailansicht des Codes der Vorlage

Verwenden Sie die folgenden Schritte, um auf die Code-Ansicht der Pop-up-Vorlage zuzugreifen:

  1. Auf dem Pop-up-Bearbeitungsbildschirm klicken Sie auf das Symbol für die Codeansicht, um auf den Vorlagencode zuzugreifen.
    studio_pop-up_editor code view

  2. Wenn Sie den Code bearbeitet haben, klicken Sie auf das Wiedergabesymbol, um eine Vorschau der Änderungen anzuzeigen.
    studio_pop-up_editor_ play button


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. Sie finden die Liste der unterstützten Komponenten in diesem Artikel. Kopieren Sie den relevanten JSX- und Desktop-CSS-Code der Komponente, die Sie verwenden möchten, und fügen Sie ihn ein.

your title goes here

Klicke auf die folgenden Komponenten, um sie zu erweitern.

Titel

JSX

<WfxTitle id="segment_title_1"
        className="templateTitle"
        titleContent={getRTEContent("segment_title_1")}
        saveListener={contentChangeListener} />

Desktop CSS

.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

JSX

<WfxDescription id="segment_desc_1"
        className="templateDescription"
        descContent={getRTEContent("segment_desc_1")}
        saveListener={contentChangeListener} />

Desktop CSS

.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

JSX

<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} />

Desktop CSS

.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;
}

Abbildung/GIF

JSX

<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} />

Desktop CSS

.wfxImageContainer {
 height: 90px;
 width: 100%;
 margin-top: 50px;
}

.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}

Avatarabbildung/GIF/Video

JSX

<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")} />

Desktop CSS

.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%;
}

Formulare für Survey

JSX

<WfxSurvey id="survey_1"
    className="wfxSurvey"
    surveyURL={getSurveyURL("survey_1")}
    sourceChangeListener={updateSurvey} />

Desktop CSS

.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

Ein Komponente, um ein Div-Element als Container zu rendern, alle Kinder von WfxDiv werden innerhalb eines divs gerendert.

Wir können irgendeinen Klassennamen dafür definieren und den CSS mit diesem Klassenselektor schreiben.

JSX

<WfxDiv className="popupTemplateFooter">
</WfxDiv>

Desktop CSS

.popupTemplateFooter {
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: center;
  bottom: 15px;
  left: 0;
  right: 0;
}


Anwendungsfälle

Fügen Sie eine zusätzliche Schaltfläche hinzu

Wenn Sie einen zusätzlichen Button in dem Pop-up einschließen möchten, können Sie die Schaltflächenkomponente verwenden.

  1. Kopieren Sie den Code des Schaltflächenkomponenten.

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

  3. Scrollen Sie nach unten zu dem Abschnitt, in dem genau Sie die Schaltfläche hinzufügen möchten.

  4. Kopierter Code einfügen.
    Dashboard_Popup_Customize_button_code

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

your title goes here

Wenn der zusätzliche Button nicht passt, versuchen Sie, die Breite des Pop-ups anzupassen.

  1. Passen Sie schließlich die Farbe, Beschriftung und Größe der Schaltfläche an.
    studio_Popup_Button_Configuration

Erhöhen Sie die Zeichenbeschränkung für Schaltflächen

Standardmäßig sind die Schaltflächen 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 charlimit-Parameter gefolgt vom Wert hinzu, wie im folgenden Bild gezeigt.
    studio-popup-button-label

  4. Klicken Sie auf die Wiedergabe-Taste.
    studio_pop-up__play button db

  5. Klicken Sie auf Speichern, um die Änderungen am Zeichenlimit zu speichern.
    studio_edit carousel_save

  6. Klicken Sie auf die Schaltfläche Bearbeiten in der Pop-up und ändern Sie die Beschriftung der Schaltfläche basierend auf dem aktualisierten Zeichenlimit.
    studio_pop-up_edit

Hinzufügen von Surveyformularen zu einer beliebigen Popup-Vorlage

Standardmäßig können Sie Survey Formulare in einem Pop-up verwenden, indem Sie nur die Vorlagen für Surveys/Meinungen verwenden. Allerdings können Sie Survey Formulare in jede Vorlage einbetten, die Sie bevorzugen, indem Sie das Survey-Formular Komponente verwenden.

  1. Kopieren Sie den Code des Survey-Formular Komponente.

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

  3. Scrollen Sie zum Abschnitt, in dem Sie das Survey-Formular hinzufügen möchten.

  4. Kopierter Code einfügen.
    studio_popup_surveycode

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

  6. Klicken Sie auf Surveylink einfügen und geben Sie dann die URL des Survey Formulars ein.
    clm_pop-up_insert link

Hinzufügen von Text zu einer lebendigen Popup-Vorlage

Standardmäßig können Sie einer Vivid Pop-up-Vorlage keinen Text hinzufügen. Sie können der Vorlage jedoch Text hinzufügen, indem Sie die oben aufgeführte Komponente description einbetten.

  1. Kopieren Sie den Beschreibungskomponenten-Code.

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

  3. Navigieren Sie zu dem Abschnitt im Code, in dem Sie den Text hinzufügen möchten.

  4. Kopierter Code einfügen.
    studio_popup_description code

  5. Klicken Sie auf die Wiedergabe-Schaltfläche, um das Komponent 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.


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.