Top
Editing Pop-up template code
  • 11 Minutes To Read
  • Print
  • Dark
    Light

Editing Pop-up template code

  • Print
  • Dark
    Light

There are two approaches to customizing your Pop-up template.

The simplest approach is to use the visual customization options built into the Pop-up creation screen.

The other option is to use Code View for making detailed visual tweaks that aren't possible using the UI options. The Code View gives access to the template's HTML, CSS, and Javascript (JSX) code to make advanced customizations. The code view is available for any template that you select.

Note:

Before you customize your template, as a best practice, duplicate the template to create a backup copy. This makes it easy to discard your changes and prevent any unexpected content loss.

Accessing the Code View of a template

To access the Code View,

  1. Navigate to the Whatfix Dashboard.
    dashboard.png
  2. Click Widgets.
    widgets1.png
  3. Click the Pop-ups tile.
    pop-up_tile
  4. Create a new pop-up using + New Pop-up and select a template. Or, edit an existing Pop-up using the Edit icon.
    edit-plus-new-pop-up-new-ui-icon
  5. Click the Code View icon to access the template code.
    code-view-icon
  6. In this screen, you can edit the template code. Once you've edited the code, click the Play button to preview the changes.

Customizing the template using Code View

In the Code View, you can directly work on the template's HTML code to make changes.

The template does not allow javascript (JSX) or HTML components of your own. You can find the list of supported components below. Copy and paste the relevant JSX and Desktop CSS code of the component you want to use.

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

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

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

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

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

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


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

.wfxImageContainer {
 height: 90px;
 width: 100%;
 margin-top: 50px;
}
 
.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}

Avatar image/GIF/video
<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")} />

.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 Forms
<WfxSurvey id="survey_1"
    className="wfxSurvey"
    surveyURL={getSurveyURL("survey_1")}
    sourceChangeListener={updateSurvey} />

.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

A component to render a <div> element as a container, all the children of WfxDiv will render inside a <div>

We can define any className for this and write the CSS using that class selector.
<WfxDiv className="popupTemplateFooter">
</WfxDiv>

<!--JSX -->
<WfxDiv className="popupTemplateFooter">
 
<!--CSS -->
.popupTemplateFooter {
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: center;
  bottom: 15px;
  left: 0;
  right: 0;
}

Use cases

Adding an extra button

If you want to include an extra button in the Pop-up, then you can use the Button component.

  1. Copy the Button component code from the table above. 
  2. Open the template Code View.
  3. Scroll down to the section where exactly you want to add the button.
  4. Paste the copied code.
  5. Click the Play button to add the button.
Note
If the additional button doesn't fit then try resizing the pop-up width.

6. Finally, customize the button color, label, and size. 

Increasing the button character limit

By default, the buttons in Whatfix Pop-up templates allow up to 15 characters. You can increase the character limit by including the charlimit parameter in the relevant button component.

  1. Open the template Code View.
  2. Scroll down to the button component section for which you want to increase the character limit.
  3. Add the charlimit parameter followed by the value as shown in the image below.
  4. Click the Play button.
  5. Click Save to save the character limit changes. 
  6. Now, you can edit the Pop-up and change the button label based on the updated character limit.

Adding survey forms to any Pop-up template

By default, you can embed survey forms in the Pop-up only using the Surveys/Opinions template. But using the Survey form component you can embed survey forms in any template you prefer. 

  1. Copy the Survey form component code from the table above. 
  2. Open the template Code View.
  3.  Scroll down to the section where exactly you want to add the survey form. 
  4. Paste the copied code.
  5. Click the Play button to add the button.
  6. Next, click Insert Survey Link and enter the survey form URL.

Similarly, you can mix and match multiple components and create your own custom template.

Additional custom templates

In addition to the default Pop-up templates, you can create your own templates using the Code View by mix-matching the components mentioned earlier. 

To help you get started, we've created three additional templates. You can recreate them by copying and pasting the template's relevant JSX, HTML, and CSS codes. 

  1. Navigate to the Whatfix Dashboard.
    dashboard.png
  2. Click Widgets.
    widgets1.png
  3. Click the Pop-ups tile.
    pop-up_tile
  4. Create a new pop-up using + New Pop-up and select a template. Or, edit the existing Pop-up using the Edit icon.
    edit-plus-new-pop-up-new-ui-icon
  5. Click the Code View icon to access the template code.
    code-view-icon
  6. In this screen, copy and paste the template's respective JSX, Desktop CSS, and Mobile CSS codes from the table below.
  7. Now, edit the button labels, text size, upload images, etc. and finish creating the Pop-up.
Template dsasdfdfdfsdfsadfdsadfsdadsfsdasadsffdsdsfsdJSXDesktop CSSMobile CSS

<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} />
<WfxTitle id="segment_title_1"
    className="templateTitle"
    titleContent={getRTEContent("segment_title_1")}
    saveListener={contentChangeListener} />

<WfxDiv className="popupTemplateFooter">
    <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}
        charlimit="50" />
    <WfxButton id="segment_prim_btn_2"
        className="wfx_primary_button"
        selectedButtonEvent={getButtonEventType("segment_prim_btn_2")}
        selectedButtonValue={getButtonEventValue("segment_prim_btn_2")}
        buttonStyle={getButtonStyle("segment_prim_btn_2")}
        buttonText={getButtonText("segment_prim_btn_2")}
        buttonHoverColor={getButtonHoverColor("segment_prim_btn_2")}
        buttonCornerRad={getButtonCornerRad("segment_prim_btn_2")}
        buttonColor={getButtonColor("segment_prim_btn_2")}
        buttonChangeListener={updateButton}
        charlimit="50" />
    <WfxButton id="segment_prim_btn_3"
        className="wfx_primary_button"
        selectedButtonEvent={getButtonEventType("segment_prim_btn_3")}
        selectedButtonValue={getButtonEventValue("segment_prim_btn_3")}
        buttonStyle={getButtonStyle("segment_prim_btn_3")}
        buttonText={getButtonText("segment_prim_btn_3")}
        buttonHoverColor={getButtonHoverColor("segment_prim_btn_3")}
        buttonCornerRad={getButtonCornerRad("segment_prim_btn_3")}
        buttonColor={getButtonColor("segment_prim_btn_3")}
        buttonChangeListener={updateButton}
        charlimit="50" />
    <WfxButton id="segment_prim_btn_4"
        className="wfx_primary_button"
        selectedButtonEvent={getButtonEventType("segment_prim_btn_4")}
        selectedButtonValue={getButtonEventValue("segment_prim_btn_4")}
        buttonStyle={getButtonStyle("segment_prim_btn_4")}
        buttonText={getButtonText("segment_prim_btn_4")}
        buttonHoverColor={getButtonHoverColor("segment_prim_btn_4")}
        buttonCornerRad={getButtonCornerRad("segment_prim_btn_4")}
        buttonColor={getButtonColor("segment_prim_btn_4")}
        buttonChangeListener={updateButton}
        charlimit="50" />
</WfxDiv>

<WfxDiv className="wfxButtonRight">
    <WfxButton id="segment_sec_btn_1"
        className="wfx_primary_button"
        selectedButtonEvent={getButtonEventType("segment_sec_btn_1")}
        selectedButtonValue={getButtonEventValue("segment_sec_btn_1")}
        buttonStyle={getButtonStyle("segment_sec_btn_1")}
        buttonText={getButtonText("segment_sec_btn_1")}
        buttonHoverColor={getButtonHoverColor("segment_sec_btn_1")}
        buttonCornerRad={getButtonCornerRad("segment_sec_btn_1")}
        buttonColor={getButtonColor("segment_sec_btn_1")}
        buttonChangeListener={updateButton} />
</WfxDiv>


.popupTemplateCard {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    height: auto;
    max-height: 525px;
    max-width: 800px;
}

#segment_sec_btn_1 {
    width: 150px;
}

.wfxImageContainer {
    height: 73px;
    width: 100%;
}

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

.popupTemplateFooter {
    padding-top: 34px;
    padding-bottom: 20px;
    text-align: center;
}

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.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: 50px;
    min-height: 25px;
    width: 90%;
    margin-top: 14px;
}

.templateTitle p {
    margin: 0px !important;
}

.templateDescription {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    wrap: break-word;
    color: #6c798e;
    max-height: 253px;
    line-height: 23px;
    min-height: 40px;
    width: 90%;
    margin-top: 11px;
}

.templateDescription p {
    margin: 0px !important;
}

.popupTemplateFooter {
    display: flex;
    flex-direction: column;
}

.wfxButtonRight {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;
}

.popupBtn {
    margin-top: 15px;
    background: #f4f5f7;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 100px;
    width: 350px;
    height: 34px;
    margin-left: 10px;
    border-radius: 3px;
    vertical-align: top;
    outline: none;
    transition: 0.2s ease;
    word-break: break-all;
    overflow: hidden;
}

.popupBtn p {
    margin: 0px !important;
}

.popupTemplateCard-popupCloseButton {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 15px;
}

.cyan {
    background: #00bcd4;
    color: white;
}

.popupSkipBtn {
    background: #f4f5f7;
    border: none;
    color: #6c798e;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    width: 50px;
    height: 34px;
    margin-right: 10px;
    border-radius: 3px;
    vertical-align: top;
    outline: none;
    transition: 0.2s ease;
    word-break: break-all;
    overflow: hidden;
}

.popupSkipBtn p {
    margin: 0px !important;
}

.popupTemplateCard {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    height: auto;
    width: 320px;
    max-height: 390px;
}

.popupTemplateFooter {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.templateTitle {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    overflow-y: hidden;
    color: #596377;
    max-height: 100px;
    min-height: 25px;
    width: 90%;
    top: 20px;
}

.templateTitle p {
    margin: 0px !important;
}

.templateDescription {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    overflow-y: auto;
    max-height: 183px;
    overflow-x: hidden;
    wrap: break-word;
    color: #6c798e;
    line-height: 19px;
    min-height: 40px;
    width: 90%;
    margin-top: 30px;
}

.popupTemplateCard-popupCloseButton {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 10px;
}

.templateDescription p {
    margin: 0px !important;
}


<WfxDiv className="main-container">
    <WfxDiv className="left-content">
        <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} />
    </WfxDiv>
    <WfxDiv className="right-content">
        <WfxTitle id="segment_title_1"
            className="templateTitle"
            titleContent={getRTEContent("segment_title_1")}
            saveListener={contentChangeListener} />
        <WfxDescription id="segment_desc_1"
            className="templateDescription"
            descContent={getRTEContent("segment_desc_1")}
            saveListener={contentChangeListener} />
        <WfxDiv className="popupTemplateFooter">
            <WfxButton id="segment_sec_btn_1"
                className="wfx_primary_button"
                selectedButtonEvent={getButtonEventType("segment_sec_btn_1")}
                selectedButtonValue={getButtonEventValue("segment_sec_btn_1")}
                buttonStyle={getButtonStyle("segment_sec_btn_1")}
                buttonText={getButtonText("segment_sec_btn_1")}
                buttonHoverColor={getButtonHoverColor("segment_sec_btn_1")}
                buttonCornerRad={getButtonCornerRad("segment_sec_btn_1")}
                buttonColor={getButtonColor("segment_sec_btn_1")}
                buttonChangeListener={updateButton} />
        </WfxDiv>
    </WfxDiv>
</WfxDiv>


.popupTemplateCard {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    background: #eef6f1;
    border-radius: 5px;
    position: relative;
    height: auto;
    max-height: 520px;
    max-width: 800px;
}

.popupTemplateFooter {
    position: relative;
    text-align: center;
    bottom: 15px;
    margin-top: 60px;
}

.main-container {
    display: flex;
    height: 350px;
}

.left-content {
    width: 50%;
}

.right-content {
    width: 50%;
}

.wfxImageContainer {
    height: 350px;
    margin: 0px;
}

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

.wfxImage {
    width: 100%;
    height: 100%;
}

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.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: 80px;
    min-height: 25px;
    width: 90%;
    top: 50px;
}

.templateTitle p {
    margin: 0px !important;
}

.templateDescription {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    -wrap: break-word;
    color: #6c798e;
    max-height: 212px;
    min-height: 40px;
    width: 90%;
    margin-top: 70px;
}

.templateDescription p {
    margin: 0px !important;
}

.popupTemplateButton {}

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

.popupBtn {
    background: #f4f5f7;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    width: 150px;
    height: 40px;
    border-radius: 3px;
    vertical-align: top;
    outline: none;
    transition: 0.2s ease;
    word-break: break-all;
    overflow: hidden;
}

.popupBtn p {
    margin: 0px !important;
}

.popupTemplateCard-popupCloseButton {
    position: absolute;
    padding-left: 20px;
    z-index: 1;
    right: 10px;
    top: 15px;
}

.cyan {
    background: #00bcd4;
    color: white;
}

.popupSkipBtn p {
    margin: 0px !important;
}

.popupTemplateCard {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    height: auto;
    width: 320px;
    max-height: 390px;
}

.popupTemplateFooter {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.templateTitle {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    overflow-y: hidden;
    color: #596377;
    max-height: 100px;
    min-height: 25px;
    width: 90%;
    top: 20px;
}

.templateTitle p {
    margin: 0px !important;
}

.templateDescription {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    overflow-y: auto;
    max-height: 183px;
    overflow-x: hidden;
    wrap: break-word;
    color: #6c798e;
    line-height: 19px;
    min-height: 40px;
    width: 90%;
    margin-top: 30px;
}

.popupTemplateCard-popupCloseButton {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 10px;
}

.templateDescription p {
    margin: 0px !important;
}


<WfxTitle id="segment_title_1"
    className="templateTitle"
    titleContent={getRTEContent("segment_title_1")}
    saveListener={contentChangeListener} />
<WfxDiv className="image-container">
    <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} />
    <WfxMedia id="segment_image_2"
        className="wfxMedia"
        height={getImageHeight("segment_image_2")}
        width={getImageWidth("segment_image_2")}
        sourceURL={getImageSource("segment_image_2")}
        alternateText={getImageAltText("segment_image_2")}
        video={getisVideo("segment_image_2")}
        imageChangeListener={updateImage} />
    <WfxMedia id="segment_image_3"
        className="wfxMedia"
        height={getImageHeight("segment_image_3")}
        width={getImageWidth("segment_image_3")}
        sourceURL={getImageSource("segment_image_3")}
        alternateText={getImageAltText("segment_image_3")}
        video={getisVideo("segment_image_3")}
        imageChangeListener={updateImage} />
</WfxDiv>

<WfxDiv className="popupTemplateFooter">
    <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} />
    <WfxButton id="segment_sec_btn_1"
        className="wfx_primary_button"
        selectedButtonEvent={getButtonEventType("segment_sec_btn_1")}
        selectedButtonValue={getButtonEventValue("segment_sec_btn_1")}
        buttonStyle={getButtonStyle("segment_sec_btn_1")}
        buttonText={getButtonText("segment_sec_btn_1")}
        buttonHoverColor={getButtonHoverColor("segment_sec_btn_1")}
        buttonCornerRad={getButtonCornerRad("segment_sec_btn_1")}
        buttonColor={getButtonColor("segment_sec_btn_1")}
        buttonChangeListener={updateButton} />
    <WfxButton id="segment_sec_btn_2"
        className="wfx_primary_button_2"
        selectedButtonEvent={getButtonEventType("segment_sec_btn_2")}
        selectedButtonValue={getButtonEventValue("segment_sec_btn_2")}
        buttonStyle={getButtonStyle("segment_sec_btn_2")}
        buttonText={getButtonText("segment_sec_btn_2")}
        buttonHoverColor={getButtonHoverColor("segment_sec_btn_2")}
        buttonCornerRad={getButtonCornerRad("segment_sec_btn_2")}
        buttonColor={getButtonColor("segment_sec_btn_2")}
        buttonChangeListener={updateButton} />
</WfxDiv>


.popupTemplateCard {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    height: auto;
    max-height: 520px;
    max-width: 800px;
}

.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: 50px;
    min-height: 25px;
    width: 90%;
    margin-top: -2px;
}

.image-container {
    display: flex;
    padding-top: 20px;
}

.popupTemplateFooter {
    padding-top: 23px;
    padding-bottom: 5px;
    text-align: center;
    bottom: 15px;
    left: 0;
    right: 0;
    display: flex;
}

.wfxImageContainer {
    height: 250px;
    width: 100%;
    margin: 20px;
}

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

.wfxMedia-pointer {
    border-radius: 20px;
    border: 2px solid #ccc;
}

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.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: 50px;
    min-height: 25px;
    width: 90%;
    top: 25px;
}

.templateTitle p {
    margin: 0px !important;
}

.templateDescription {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    -wrap: break-word;
    color: #6c798e;
    max-height: 146px;
    min-height: 40px;
    width: 90%;
    margin-top: 30px;
}

.templateDescription p {
    margin: 0px !important;
}

.popupTemplateFooter {
    padding-bottom: 25px;
}

.popupTemplateButton {
    width: 100%;
}

.popupBtn {
    background: #f4f5f7;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    width: 150px;
    height: 40px;
    border-radius: 3px;
    vertical-align: top;
    outline: none;
    transition: 0.2s ease;
    word-break: break-all;
    overflow: hidden;
}

.popupBtn p {
    margin: 0px !important;
}

.popupTemplateCard-popupCloseButton {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 15px;
}

.cyan {
    background: #00bcd4;
    color: white;
}

.popupSkipBtn {
    background: none;
    border: none;
    color: #9FA6B7;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    width: 150px;
    height: 40px;
    margin-left: 18px;
    margin-right: 18px;
    border-radius: 3px;
    vertical-align: top;
    outline: none;
    transition: 0.2s ease;
    word-break: break-all;
    overflow: hidden;
}

.popupSkipBtn p {
    margin: 0px !important;
}

.popupTemplateCard {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    height: auto;
    width: 320px;
    max-height: 390px;
}

.popupTemplateFooter {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.templateTitle {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    overflow-y: hidden;
    color: #596377;
    max-height: 100px;
    min-height: 25px;
    width: 90%;
    top: 20px;
}

.templateTitle p {
    margin: 0px !important;
}

.templateDescription {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    overflow-y: auto;
    max-height: 183px;
    overflow-x: hidden;
    wrap: break-word;
    color: #6c798e;
    line-height: 19px;
    min-height: 40px;
    width: 90%;
    margin-top: 30px;
}

.popupTemplateCard-popupCloseButton {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 10px;
}

.templateDescription p {
    margin: 0px !important;
}


Was This Article Helpful?