- 17 Oct 2023
- 4 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Anpassen der Popup-Vorlagen
- Aktualisiert am 17 Oct 2023
- 4 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
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.
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.
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
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.
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.
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.
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.
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.