Top

Anpassen der Popup-Vorlagen

17 Oct 2023
4 Minuten zu lesen

Drucken
Teilen
Dunkel

Licht
pdf

Anpassen der Popup-Vorlagen

Aktualisiert am 17 Oct 2023
4 Minuten zu lesen

Drucken
Teilen
Dunkel

Licht
pdf

Artikel-Zusammenfassung

Fanden Sie diese Zusammenfassung hilfreich?

Vielen Dank für Ihr Feedback

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:

Auf dem Pop-up-Bearbeitungsbildschirm klicken Sie auf das Symbol für die Codeansicht, um auf den Vorlagencode zuzugreifen.
Wenn Sie den Code bearbeitet haben, klicken Sie auf das Wiedergabesymbol, um eine Vorschau der Änderungen anzuzeigen.

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.

Kopieren Sie den Code des Schaltflächenkomponenten.
Öffnen Sie die Vorlagencodeansicht.
Scrollen Sie nach unten zu dem Abschnitt, in dem genau Sie die Schaltfläche hinzufügen möchten.
Kopierter Code einfügen.
Klicken Sie auf die Schaltfläche Wiedergabe, um die Schaltfläche hinzuzufügen.

your title goes here

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

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

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.

Öffnen Sie die Vorlagencodeansicht.
Scrollen Sie nach unten zum Abschnitt der Schaltflächenkomponente, für den Sie die Zeichenbeschränkung erhöhen möchten.
Fügen Sie den charlimit-Parameter gefolgt vom Wert hinzu, wie im folgenden Bild gezeigt.
Klicken Sie auf die Wiedergabe-Taste.
Klicken Sie auf Speichern, um die Änderungen am Zeichenlimit zu speichern.
Klicken Sie auf die Schaltfläche Bearbeiten in der Pop-up und ändern Sie die Beschriftung der Schaltfläche basierend auf dem aktualisierten Zeichenlimit.

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.

Kopieren Sie den Code des Survey-Formular Komponente.
Öffnen Sie die Vorlagencodeansicht.
Scrollen Sie zum Abschnitt, in dem Sie das Survey-Formular hinzufügen möchten.
Kopierter Code einfügen.
Klicken Sie auf die Wiedergabe-Schaltfläche, um das Komponent hinzuzufügen.
Klicken Sie auf Surveylink einfügen und geben Sie dann die URL des Survey Formulars ein.

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.

Kopieren Sie den Beschreibungskomponenten-Code.
Öffnen Sie die Vorlagencodeansicht.
Navigieren Sie zu dem Abschnitt im Code, in dem Sie den Text hinzufügen möchten.
Kopierter Code einfügen.
Klicken Sie auf die Wiedergabe-Schaltfläche, um das Komponent hinzuzufügen.
Fügen Sie den erforderlichen Text in das angezeigte Textfeld ein.
Klicken Sie auf Speichern.

Ebenso können Sie mehrere Komponenten mischen und anpassen und Ihre eigene Anpassen Vorlage erstellen.

War dieser Artikel hilfreich?

What's Next

Die Pop-up Vorlagen über die Codeansicht anpassen

Inhaltsverzeichnis

Anwendungsfälle

Changing your password will log you out immediately. Use the new password to log back in.

Current password

New password

Confirm password

First Name

First name must have atleast 2 characters. Numbers and special characters are not allowed.

Last Name

Last name must have atleast 1 characters. Numbers and special characters are not allowed.

New email

Enter a valid email

Re-enter your password

Enter a valid password

Your profile has been successfully updated.

Logout