Blog

PX Design Engagements 101 : Release Guide with toggle cards

  • 10 July 2023
  • 7 replies
  • 611 views
PX Design Engagements 101 : Release Guide with toggle cards
Userlevel 6
Badge

 

Design is not just what it looks like or feels like. Design is how it works!!✨


Absolutely! Gainsight PX has made significant advancements recently, thanks to the incredible analytic add-ons and improvements in the new editor. Remember the dialogue we had during our last release announcement? Well, you'll be glad to know that we have achieved that level of engagement using our own editor.

Our engagement editor goes beyond just cells and elements. It's like a canvas where you can create your own masterpiece. The real trick lies in customizing things according to your preferences by leveraging custom coding. It may sound a bit tricky, but it's never impossible. We are here to provide you with all the necessary information so that, for your next release, you won't have to worry about effectively communicating your release communications in a single slider with multiple steps.

We also completely understand the impact that drop-offs can have on your engagement, and we're here to assist you in overcoming that challenge. With this experiment, we've transformed a comprehensive 4-step slider into a single-step self-learning dialog. Now, users simply click on what interests them, and the best part is that we gather valuable insights about who is viewing what. It's a win-win situation where you can capture user preferences while delivering a more streamlined and engaging experience. 

Thanks to creative minds behind this : @aharkut @VenkataKrishnaInti 

 

Gainsight PX - May Release dialog that replaced Release slider


What went into design of this engagement:
 

The logic for toggling the cards and changing the image on the right side is implemented through the JavaScript function that is triggered when a card is clicked. Let's break down the logic step by step:

1. Retrieving the selected card:
   - The function first checks if the clicked card is already selected by checking if the `card-selected` class is present on the card element.
   - The variable `isSelectedCard` is set to `true` if the card is already selected, or `false` if it is not selected.

2. Modifying the display of other card elements:
   - The function hides the element with the `id` "none_right". This element is presumably the container for the image on the right side.
   - It loops through all the card elements using `Array.from(document.getElementsByClassName('card'))`.
   - For each card, it removes the `card-selected` class and adds the `card` class to reset their appearance.

3. Toggling the selected card:
   - If the card is already selected (`isSelectedCard` is `true`), the function removes the `card-selected` class from the clicked card.
   - If the card is not selected (`isSelectedCard` is `false`), the function adds the `card-selected` class to the clicked card.

4. Displaying/hiding the card description:
   - The function loops through all the elements with the class `card_desc`.
   - If the card is already selected, it sets the `display` style of the description element to `'none'` to hide it.
   - If the card is not selected, it sets the `display` style of the description element to `'block'` to show it.

5. Displaying/hiding the right-side content:
   - The function loops through all the elements with the class `card_right`.
   - If the card is already selected, it sets the `display` style of the right-side content element to `'none'` to hide it.
   - If the card is not selected, it sets the `display` style of the right-side content element to `'flex'` to show it.

6. Handling the case when no card is selected:
   - If there are no cards with the `card-selected` class (`!document.querySelector('.card-selected')`), it sets the `display` style of the element with the `id` "none_right" to `'flex'` to show it.

7. Tracking the card click:
   - The function includes calls to Aptrinsic analytics (`aptrinsic`) to identify the user and track the card click event with relevant data.

Overall, the logic of the toggle functionality involves adding/removing classes to toggle the appearance of the clicked card, hiding/showing the description and right-side content based on the card's selection status, and updating the visibility of the image on the right side.


Code Preview : 

CSS :

/* ––––– ☕️ WRAPPER ––––– */

.wrapper {
    display: flex;
    justify-content: center;
    vertical-align: middle !important;
    align-items: center;
    height: calc(100% - 24px);
    padding: 0px 10px !important;
}

.wrapper_body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
  


.card {
    background: #f2f2f2 !important;    
    border: none;
    border-radius: 20px !important;
    padding: 10px 10px 10px 10px !important;
    font-family: 'Noto Sans', sans-serif;
    transition: 0.4s;
}
/* DCECFE */

.card:hover {
    background: #d6d6d6 !important; 
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif
}

.card-selected {
    background: #ffffff !important;   
    font-family: 'Noto Sans', sans-serif
    /*border: solid #f4f4f4;*/
}

#c1_title, #c2_title, #c3_title, #c4_title {
  > strong {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.card_header
{
    display: flex;
    align-items: center;
    gap: 15px;
  
}


.card_desc, .card_right {
    display: none;
    
}

#c3_desc, #c4_desc{
  margin: 5px 10px 5px 39px !important;
}

#c2_desc{
  margin: 5px 10px 5px 41px !important;
}

#c1_desc{
  margin: 5px 10px 5px 44px !important;
}

/*
#c3_desc, #c4_desc{
  margin-left:28px;
  margin-top: 4px;
}
*/

.card_right{
   vertical-align: middle;
   justify-content: center;
   height: 100%;
   align-items: center;
   display: flex;
}

.px-step-navigation{
  border-top:solid #f2f2f2 2px !important;
}

.px-div-group-buttons{
  display: none !important;
}

/*
#px-4eb6dab6-337e-4ad4-b751-ea6c1de911de{
  width: calc((40% + 0px) - 0px) !important;
}

#px-4a86d74d-d09e-45a6-b630-8204bb45a66c{
  width: calc((60% + 0px) - 0px) !important;
}
*/




HTML :

 


        <div class="wrapper">
            <div class="wrapper_body">
                <div class="card card-selected" id="c1_left" onclick="(function (card) {
                
        let isSelectedCard =  document.getElementById(`${card}_left`).classList.contains('card-selected');
        
        document.getElementById('none_right').style.display = 'none';

        Array.from(document.getElementsByClassName('card')).forEach(item => { 
          item.classList.remove('card-selected');
                item.classList.add('card');
        }) 
        
    if (isSelectedCard) {
          document.getElementById(`${card}_left`).classList.remove('card-selected'); 
      } else {
        document.getElementById(`${card}_left`).classList.add('card-selected'); 
      }
    
    Array.from(document.getElementsByClassName('card_desc')).forEach(item => { 
            item.style.display = 'none';
        })
        
    if (isSelectedCard) {
          document.getElementById(`${card}_desc`).style.display = 'none';
        } else {
          document.getElementById(`${card}_desc`).style.display = 'block';
        }
        
    Array.from(document.getElementsByClassName('card_right')).forEach(item => { 
            item.style.display = 'none';
        })
        
      
    if (isSelectedCard) {
      document.getElementById(`${card}_right`).style.display = 'none';  
    } else {
      document.getElementById(`${card}_right`).style.display = 'flex';  
    }
    
    if (!document.querySelector('.card-selected')) {
      document.getElementById('none_right').style.display = 'flex';
    }
    
        
    })('c1'); aptrinsic('identify',{'id':'{{User.id}}','release_card1':'true'}); aptrinsic('track', 'release_card1', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true})">
                <div class="card_header" id="c1_title">
                    <strong class="card_header">
                        <img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/82a61b25-5afe-4986-bf31-d4a9519c91e3.png" width="30" id="px-d28e170f-4eba-4393-b9f8-42fabddd7be9" height="30" style="width: 30px; height: 30px;">
                            <span style="font-size: 16px; color: rgb(52, 56, 58); text-align: left; display: flex;">Draft Mode Improves Engagement Life-cycle Management</span>
                        </strong>
                    </div>
                    <div class="card_desc" id="c1_desc" style="display: block; text-align: left; margin-left: 10px;">
                        <span style="color: rgb(104, 93, 93); font-size: 12px;">Using the new Draft Mode, you can now make edits to active engagements without pausing or affecting the live version. Simply turn on Draft Mode, make your edits, and publish your changes.</span>
                    </div>
                </div>
                <div class="card" id="c2_left" onclick=" (function (card) {
                
        let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');
        
        document.getElementById('none_right').style.display = 'none';

        Array.from(document.getElementsByClassName('card')).forEach(item => { 
        item.classList.remove('card-selected');
              item.classList.add('card');
    })            
    
    if (isSelectedCard) {
          document.getElementById(`${card}_left`).classList.remove('card-selected'); 
      } else {
        document.getElementById(`${card}_left`).classList.add('card-selected'); 
      }
        
    Array.from(document.getElementsByClassName('card_desc')).forEach(item => { 
            item.style.display = 'none';
      })
    
    if (isSelectedCard) {
          document.getElementById(`${card}_desc`).style.display = 'none';
        } else {
          document.getElementById(`${card}_desc`).style.display = 'block';
        }
        
    Array.from(document.getElementsByClassName('card_right')).forEach(item => { 
            item.style.display = 'none';
      })
        
    if (isSelectedCard) {
      document.getElementById(`${card}_right`).style.display = 'none';  
    } else {
      document.getElementById(`${card}_right`).style.display = 'flex';  
    }
    
    if (!document.querySelector('.card-selected')) {
      document.getElementById('none_right').style.display = 'flex';
    }
    })('c2'); aptrinsic('identify',{'id':'{{User.id}}','release_card2':'true'}); aptrinsic('track', 'release_card2', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true});">
                <div id="c2_title">
                    <strong class="card_header">
                        <img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/76b5e51a-b67b-43f1-b300-d7aee4d22941.png" style="width: 28px; text-align: center; height: 25px;" width="28" height="25" id="px-2d18506e-494d-4e15-9f4d-bda2f49d800d">
                            <span style="font-size: 16px; color: rgb(52, 56, 58); display: flex;">View Audience Targeting Estimates for Engagements</span>
                        </strong>
                    </div>
                    <div class="card_desc" id="c2_desc" style="display: none; text-align: left; margin-left: 10px;">
                        <span style="color: rgb(104, 93, 93); font-size: 12px;">Optimising your targeting strategy just got easier. With the new Preview option, you can estimate the potential target audience before launching an In-App engagement - even with complex audience rules.</span>
                    </div>
                </div>
                <div class="card" id="c3_left" onclick="(function (card) {
        
        let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');
        
        document.getElementById('none_right').style.display = 'none';

        Array.from(document.getElementsByClassName('card')).forEach(item => { 
      item.classList.remove('card-selected');
            item.classList.add('card');
    })
    
        if (isSelectedCard) {
          document.getElementById(`${card}_left`).classList.remove('card-selected'); 
      } else {
        document.getElementById(`${card}_left`).classList.add('card-selected'); 
      }
    
    Array.from(document.getElementsByClassName('card_desc')).forEach(item => { 
            item.style.display = 'none';
        })
        
        if (isSelectedCard) {
          document.getElementById(`${card}_desc`).style.display = 'none';
        } else {
          document.getElementById(`${card}_desc`).style.display = 'block';
        }
        
    Array.from(document.getElementsByClassName('card_right')).forEach(item => { 
          item.style.display = 'none';
    })
        
    if (isSelectedCard) {
      document.getElementById(`${card}_right`).style.display = 'none';  
    } else {
      document.getElementById(`${card}_right`).style.display = 'flex';  
    }
    
    if (!document.querySelector('.card-selected')) {
      document.getElementById('none_right').style.display = 'flex';
    }
    
    })('c3'); aptrinsic('identify',{'id':'{{User.id}}','release_card3':'true'}); aptrinsic('track', 'release_card3', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true});">
                <div id="c3_title">
                    <strong class="card_header">
                        <img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/1aef04f0-8117-4559-9675-c1219163a1ae.png" style="width: 25px; text-align: center; height: 25px;" width="25" height="25">
                            <span style="font-size: 16px; color: rgb(52, 56, 58); display: flex;">Enhanced Performance Analysis with Query Builder</span>
                        </strong>
                    </div>
                    <div class="card_desc" id="c3_desc" style="display: none; text-align: left; margin-left: 8px;">
                        <span style="color: rgb(104, 93, 93); font-size: 12px;">With the new Group By options and the ability to analyze all qualifying custom events, you can now conduct in-depth performance analysis of Features, Engagements, and Custom Events using Query Builder.</span>
                    </div>
                </div>
                <div class="card" id="c4_left" onclick="(function (card) {
        
        let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');
        
        document.getElementById('none_right').style.display = 'none';

        Array.from(document.getElementsByClassName('card')).forEach(item => { 
      item.classList.remove('card-selected');
            item.classList.add('card');
    })
    
        if (isSelectedCard) {
          document.getElementById(`${card}_left`).classList.remove('card-selected'); 
      } else {
        document.getElementById(`${card}_left`).classList.add('card-selected'); 
      }
    
    Array.from(document.getElementsByClassName('card_desc')).forEach(item => { 
            item.style.display = 'none';
        })
        
        if (isSelectedCard) {
          document.getElementById(`${card}_desc`).style.display = 'none';
        } else {
          document.getElementById(`${card}_desc`).style.display = 'block';
        }
        
    Array.from(document.getElementsByClassName('card_right')).forEach(item => { 
          item.style.display = 'none';
    })
        
    if (isSelectedCard) {
      document.getElementById(`${card}_right`).style.display = 'none';  
    } else {
      document.getElementById(`${card}_right`).style.display = 'flex';  
    }
    
    if (!document.querySelector('.card-selected')) {
      document.getElementById('none_right').style.display = 'flex';
    }
    
    })('c4'); aptrinsic('identify',{'id':'{{User.id}}','release_card4':'true'}); aptrinsic('track', 'release_card4', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true});">
                <div id="c4_title">
                    <strong class="card_header">
                        <img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/56acb429-50ef-4c91-aab8-f9d94ee284f9.png" style="width: 25px; text-align: center; height: 25px;" width="25" height="25" id="px-24f9ee96-102c-4fcc-b021-2f764bcb98f0">
                            <span style="font-size: 16px; color: rgb(52, 56, 58); display: flex;">
                                <strong>Streamlined Search with New Filters in Product Mapper</strong>
                            </span>
                        </strong>
                    </div>
                    <div class="card_desc" id="c4_desc" style="display: none; text-align: left; margin-left: 8px;">
                        <span style="color: rgb(104, 93, 93); font-size: 12px;">New Filters in the Product Feature Tree offer a quick and efficient way of searching for features and modules using multiple criteria.</span>
                    </div>
                </div>
            </div>
        </div>
    



This experiment worked well in our case and we were able to communicate all the info in a more concise manner in a single dialog. We are sure you are already thinking how this logic can fit into your communications, please do share your use-cases with us and the community. Let’s do this together!


Happy PX-ing!


 


7 replies

Userlevel 5
Badge +2

@JayS @JPKelliher  seems like something y’all would be interested in! :)

Userlevel 5
Badge

This looks interesting. Is it possible to create a template, so that content creators don’t need to look at the HTML and Javascript?

Userlevel 6
Badge

@aharkut , are there any plans to templatize this engagement?

Userlevel 4
Badge +6

Is this something that would work on Mobile?

 

CC: @rnaber 

Userlevel 4
Badge +6

Do we have tracking in place to see how many users click through all of the toggle cards? @Sruthimalla 

Userlevel 1
Badge

This is cool -  has anyone gotten this to work with the instructions above?  I can’t make this work and am struggling, curious if someone has been successful?

@brian.atkins To ensure that the use case is successfully completed as expected, kindly add the code provided below.

Guide CSS(Common to all the steps):

/* –––– ☮ Global CSS –––– */

/* –––– To control overflow of Hero Image –––– */
div.px-engagement-wrapper-guide:not(.apt-guide-tooltip) {
overflow: auto !important;
}

/* –––– control overflow of image from one cell to another –––– */
div.px-div {
overflow-x: auto;
}

/* To set the padding of bullet list*/
ul, menu, dir {
margin-block-start: 0.5em;
padding-inline-start: 30px;
}

/* –––– ⚡ CLOSE –––– */

div.px-close-button {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Im04IDE2IDgtOE04IDhsOCA4IiBzdHJva2U9IiM3NTk2QjciIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
}
/* Snooze button */

.px-step-navigation-snooze {

}

1st Row(heading): 
99e0d080-5d00-43b8-9d8d-28f0fb959618.jpg?source=web&v=8f4c16cf5bdf557aba0e95b2ee3282e1
 
HTML code:

<p style="font-size: 13px;">
<span style="font-size: 25px; font-family: inherit; color: rgb(21, 61, 93);">
<strong>Gainsight PX February Release is Live!</strong>
</span>
<br>
<span style="font-size: 11px; color: rgb(112, 112, 112);">
</span>
<span style="font-size: 13px; color: rgb(112, 112, 112);">
<em>
<span style="font-family: inherit;">Click each card below to know more about the feature</span>
</em>
</span>
<span style="font-size: 11px; color: rgb(112, 112, 112);">
</span>
</p>

 

HTML Code for 2nd row 1st column:
94a2eaaa-f9b9-4df6-810b-94eb8cd51671.jpg?source=web&v=eddb096304512f87f9d09d1b5b563ce1
 

<div class="wrapper">
<div class="wrapper_body">
<div class="card" id="c1_left" onclick="(function (card) {

let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');

document.getElementById('none_right').style.display = 'none';
Array.from(document.getElementsByClassName('card')).forEach(item => {
item.classList.remove('card-selected');
item.classList.add('card');
})

if (isSelectedCard) {
document.getElementById(`${card}_left`).classList.remove('card-selected');
} else {
document.getElementById(`${card}_left`).classList.add('card-selected');
}

Array.from(document.getElementsByClassName('card_desc')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_desc`).style.display = 'none';
} else {
document.getElementById(`${card}_desc`).style.display = 'block';
}

Array.from(document.getElementsByClassName('card_right')).forEach(item => {
item.style.display = 'none';
})


if (isSelectedCard) {
document.getElementById(`${card}_right`).style.display = 'none';
} else {
document.getElementById(`${card}_right`).style.display = 'flex';
}

if (!document.querySelector('.card-selected')) {
document.getElementById('none_right').style.display = 'flex';
}


})('c1'); aptrinsic('track', 'release_card1', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true})">
<div class="card_header" id="c1_title">
<strong class="card_header">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/83422ad2-b6b1-4f72-8c00-d59ad81b2dfa.png" width="30" id="px-d28e170f-4eba-4393-b9f8-42fabddd7be9" height="30" style="width: 30px; height: 30px;">
<span style="font-size: 16px; color: rgb(52, 56, 58); text-align: left; display: flex;">Streamlined Engagement Creation</span>
</strong>
</div>
<div class="card_desc" id="c1_desc" style="display: none; text-align: left; margin-left: 10px;">
<span style="color: rgb(104, 93, 93); font-size: 12px;">The new Quick Action toolbar allows you to take quick actions like cloning, rearranging, and deleting elements with a click of a button, right from within the engagement editor. Effortlessly locate the engagement element being edited and understand what edits are possible by looking for the highlighted section.</span>
</div>
</div>
<div class="card" id="c2_left" onclick=" (function (card) {

let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');

document.getElementById('none_right').style.display = 'none';
Array.from(document.getElementsByClassName('card')).forEach(item => {
item.classList.remove('card-selected');
item.classList.add('card');
})

if (isSelectedCard) {
document.getElementById(`${card}_left`).classList.remove('card-selected');
} else {
document.getElementById(`${card}_left`).classList.add('card-selected');
}

Array.from(document.getElementsByClassName('card_desc')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_desc`).style.display = 'none';
} else {
document.getElementById(`${card}_desc`).style.display = 'block';
}

Array.from(document.getElementsByClassName('card_right')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_right`).style.display = 'none';
} else {
document.getElementById(`${card}_right`).style.display = 'flex';
}

if (!document.querySelector('.card-selected')) {
document.getElementById('none_right').style.display = 'flex';
}
})('c2'); aptrinsic('track', 'release_card2', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true});">
<div id="c2_title">
<strong class="card_header">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/f7bf2fe5-8631-455a-a512-6d084aab52f4.png" style="width: 28px; text-align: center; height: 25px;" width="28" height="25" id="px-2d18506e-494d-4e15-9f4d-bda2f49d800d">
<span style="font-size: 16px; color: rgb(52, 56, 58); display: flex;">CSV Segments Upload                         </span>
</strong>
</div>
<div class="card_desc" id="c2_desc" style="display: none; text-align: left; margin-left: 10px;">
<span style="color: rgb(104, 93, 93); font-size: 12px;">Easily import a set customer list into Gainsight PX by uploading a CSV file to create a new segment. Leverage the CSV segment in engagements, analytics, and dashboards.</span>
</div>
</div>
<div class="card" id="c3_left" onclick="(function (card) {

let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');

document.getElementById('none_right').style.display = 'none';

Array.from(document.getElementsByClassName('card')).forEach(item => {
item.classList.remove('card-selected');
item.classList.add('card');
})

if (isSelectedCard) {
document.getElementById(`${card}_left`).classList.remove('card-selected');
} else {
document.getElementById(`${card}_left`).classList.add('card-selected');
}

Array.from(document.getElementsByClassName('card_desc')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_desc`).style.display = 'none';
} else {
document.getElementById(`${card}_desc`).style.display = 'block';
}

Array.from(document.getElementsByClassName('card_right')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_right`).style.display = 'none';
} else {
document.getElementById(`${card}_right`).style.display = 'flex';
}

if (!document.querySelector('.card-selected')) {
document.getElementById('none_right').style.display = 'flex';
}

})('c3'); aptrinsic('track', 'release_card3', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true});">
<div id="c3_title">
<strong class="card_header">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/ce5a2f99-2fc1-43b1-86ae-1132e4677096.png" style="width: 25px; text-align: center; height: 25px;" width="25" height="25" id="px-8a4e616e-4c16-4e50-8c98-115365ddaf02">
<span style="font-size: 16px; color: rgb(52, 56, 58); display: flex;">Segments Enhancements</span>
</strong>
</div>
<div class="card_desc" id="c3_desc" style="display: none; text-align: left; margin-left: 8px;">
<span style="color: rgb(104, 93, 93); font-size: 12px;">Quickly identify, filter, and use your segments with enhanced segment categorization. Categories include:
Real-Time Segments - Segments that are built based on rules in Gainsight PX and updated in real-time.

Segments - CSV segments and External Segments (segments that are pushed into PX from external systems such as Adobe Experience Platform).



<div class="card" id="c4_left" onclick="(function (card) {
let isSelectedCard = document.getElementById(`${card}_left`).classList.contains('card-selected');

document.getElementById('none_right').style.display = 'none';

Array.from(document.getElementsByClassName('card')).forEach(item => {
item.classList.remove('card-selected');
item.classList.add('card');
})

if (isSelectedCard) {
document.getElementById(`${card}_left`).classList.remove('card-selected');
} else {
document.getElementById(`${card}_left`).classList.add('card-selected');
}

Array.from(document.getElementsByClassName('card_desc')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_desc`).style.display = 'none';
} else {
document.getElementById(`${card}_desc`).style.display = 'block';
}

Array.from(document.getElementsByClassName('card_right')).forEach(item => {
item.style.display = 'none';
})

if (isSelectedCard) {
document.getElementById(`${card}_right`).style.display = 'none';
} else {
document.getElementById(`${card}_right`).style.display = 'flex';
}

if (!document.querySelector('.card-selected')) {
document.getElementById('none_right').style.display = 'flex';
}

})('c4'); aptrinsic('track', 'release_card4', {'clicked': 'true', 'clickedNumber':1, 'clickedBoolean':true});">
<div id="c4_title">
<strong class="card_header">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/f4050c9a-44a7-4e30-829f-6b5c02ff42f2.png" style="width: 25px; text-align: center; height: 25px;" width="25" height="25" id="px-24f9ee96-102c-4fcc-b021-2f764bcb98f0">
<span style="font-size: 16px; color: rgb(52, 56, 58); display: flex;">
<strong>CTA Analytics Enhancements</strong>
</span>
</strong>
</div>
<div class="card_desc" id="c4_desc" style="display: none; text-align: left; margin-left: 8px;">
<span style="color: rgb(104, 93, 93); font-size: 12px;">The new CTA Analytics tab in In-App Performance reports enables you to track the performance of multiple CTAs across users and accounts. Leverage detailed CTA analytics to understand engagement impact and optimize the user experience. </span>
</div>
</div>
</div>
</div>

HTML Code for 2nd row 2nd column:
 
667c0b3b-b4d5-4ca1-8b80-b8c5e020cb53.jpg?source=web&v=f26a712c1c60ae0a6e85a3215c7e2f95
 
 

<div class="card_right" id="none_right" style="display: none; justify-content: center; text-align: left;">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/423b6980-fe37-455d-886b-d5ade36cadfe.gif" width="433" id="px-33d43cc4-9f40-4f6a-affe-ba413cc041ce" height="270" style="width: 433px; height: 270px;">
</div>
<div class="card_right" id="c1_right" style="display: none; text-align: center;">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/a743bc7a-319d-4e0a-9198-c3a369e25109.png" width="434" height="300" id="px-d41128c7-bbba-48e7-b01b-d91a919f4c53" style="width: 434px; height: 300px;">
</div>
<div class="card_right" id="c2_right" style="display: flex; text-align: center;">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/c973df80-e67c-4895-a07f-05cddce6a197.png" width="452" height="228" id="px-d41128c7-bbba-48e7-b01b-d91a919f4c53" style="width: 452px; height: 228px;">
</div>
<div class="card_right" id="c3_right" style="display: none; text-align: center;">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/12b50d7d-175f-4a35-bae8-7e7965ff2e6a.png" width="433" height="267" id="px-a006b67c-2342-48bb-9c23-6074128b2ac8" style="width: 433px; height: 267px;">
</div>
<div class="card_right" id="c4_right" style="display: none; text-align: center;">
<img src="https://storage.googleapis.com/froala-upload-prod/0b669fad-5e70-4250-a06f-0cd41e9feb3d/image/8e38fac6-5609-476b-9a6a-57e10ba2567f.png" width="433" height="266" id="px-0dd2f433-55b0-4922-a5fd-ba1ca555c5f4" style="width: 433px; height: 266px;">
</div>

 Final row(3rd row) 1st column:
 
c1dafff7-1c15-47a6-b278-89fc8f8098f1.jpg?source=web&v=6f342639251dadfc4bfaffeb21f2ca26
HTML Code:
 

<div style="text-align: justify;">
<span id="Powered_by">
<span style="font-size: 12px;">Powered by Gainsight PX | </span>
<a alt="GameChanger Community Post - How to build a guide like this" href="https://community.gainsight.com/gainsight-px-22/px-design-engagements-101-release-guide-with-toggle-cards-46043" target="_blank">
<span style="font-size: 12px;">Learn how we built it!</span>
</a>
</span>
</div>

 
Final row(3rd row) 2nd column:
 
1a1de08e-39ce-4c44-9d81-18080cc27a5b.jpg?source=web&v=1c5cbb767b2d6375c452d1021ad0fcfa

<p style="text-align: right;">&nbsp;<button id="pxCustomButton-f853721b-80e7-4a75-bd4c-f88fc2a21288" style="padding: 10px 15px; border-radius: 30px; background-color: rgb(21, 61, 94); color: rgb(255, 255, 255); font-size: 14px; font-family: Helvetica, Helvetica, Helvetica, Helvetica, Helvetica, Helvetica; font-style: unset; font-weight: unset; text-decoration: unset; border-style: none; border-width: 0px; border-color: rgb(21, 61, 94); cursor: pointer; display: inline-block;">PX&nbsp;Community</button>&nbsp; &nbsp; &nbsp;<button id="pxCustomButton-d46cd667-e63d-4617-b3fa-a520edf0a6e7" style="padding: 10px 15px; border-radius: 30px; background-color: rgb(252, 198, 66); color: rgb(255, 255, 255); font-size: 14px; font-family: Helvetica, Helvetica, Helvetica, Helvetica, Helvetica, Helvetica; font-style: unset; font-weight: unset; text-decoration: unset; border-style: none; border-width: 0px; border-color: rgb(4, 112, 247); cursor: pointer; display: inline-block;">Release&nbsp;Notes</button>&nbsp;</p>

 Step CSS:

/* ––––– :coffee: WRAPPER ––––– */

.wrapper {
display: flex;
justify-content: center;
vertical-align: middle !important;
align-items: center;
height: calc(100% - 24px);
padding: 0px 10px !important;
}

.wrapper_body {
display: flex;
flex-direction: column;
gap: 20px;
}


.card {
background: #f2f2f2 !important;
border: none;
border-radius: 20px !important;
padding: 10px 10px 10px 10px !important;
font-family: 'Noto Sans', sans-serif;
transition: 0.4s;
}
/* DCECFE */

.card:hover {
background: #d6d6d6 !important;
cursor: pointer;
font-family: 'Noto Sans', sans-serif
}



.card-selected {
background: #ffffff !important;
font-family: 'Noto Sans', sans-serif
/border: solid #f4f4f4;/
}

c1_title, #c2_title, #c3_title, #c4_title {
strong {
display: flex;
align-items: center;
gap: 4px;
}
}

.card_header
{
display: flex;
align-items: center;
gap: 15px;
}


.card_desc, .card_right {
display: none;
}

c3_desc, #c4_desc{
margin: 5px 10px 5px 39px !important;
}

c2_desc{
margin: 5px 10px 5px 41px !important;
}

c1_desc{
margin: 5px 10px 5px 44px !important;
}

/*
c3_desc, #c4_desc{
margin-left:28px;
margin-top: 4px;
}
*/

.card_right{
vertical-align: middle;
justify-content: center;
height: 100%;
align-items: center;
display: flex;
}



.px-step-navigation{
border-top:solid #f2f2f2 2px !important;
}

.px-div-group-buttons{
display: none !important;
}

/*
px-4eb6dab6-337e-4ad4-b751-ea6c1de911de{
width: calc((40% + 0px) - 0px) !important;
}

px-4a86d74d-d09e-45a6-b630-8204bb45a66c{
width: calc((60% + 0px) - 0px) !important;
}
*/

/* Powered by Gainsight text formatting */

Powered_by {
color: #fcc642;
font-weight: bold
!important; font-size: 10px;
overflow: visible;
}

Powered_by a {
color: #2f3338;
font-weight: normal;
}

Powered_by a:hover {
text-decoration: underline;
}

The engagement displays as follows after you update HTML and CSS as I advised above:
 

Thank you!

Reply