When you start using a new piece of software for the first time, you typically begin by looking around the user interface, discovering what parts are relevant to you, and thinking about how it can be used for your use case. As the team supporting that software, you may have a good idea of what features your users would find most useful, and perhaps even the use cases associated with them. That’s why it’s important to create a personalized welcome guide for your software to help your new users overcome the initial learning curve.

In my recent blog post, I wrote about how you can understand your users better by leveraging Gainsight PX to collect the roles and goals of your users. With that information available, it’s time to start creating a personalized new user welcome guide.

Here’s a sneak peek of what our finished guide looks like, and the steps you need so you can replicate it yourself:

Planning

The first step of any great project is to start with a plan. In this case, I recommend that you plan to categorize your users in two ways:

What are the groups of users I want to target
What messages are most relevant to this group of users

With this information in hand, you can begin to think about how you want the engagement to look. At this point, it doesn’t need to be perfect. You’ll likely change the design several more times before/as you begin to build the final product, but it helps to have a wireframe for your written content and any screenshots/videos you would like to include.

Here’s an example of how our mockup looked before we built the finished product:

The Build

Warning: If you are stuck or unsure about editing HTML/CSS, please consult a developer who can assist accordingly.

Now comes the fun bit. At this point you should have identified who your planned audience is, what are the planned outcomes, and what content you would like to include in your guide.

To begin the build, start with a basic guide engagement inside of PX. The template I prefer to use is in the new editor, under the default template and the option called “Hero Dialog”. After removing the default text and adding two columns (the one with the left side smaller than the right), you can begin to add the code needed for this engagement. Here are some snippets of the code we used:

Left Side (HTML)

<div>
    <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 = 'block';
        }

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


        })('c1');">
        <div id="c1_title">
            <strong>
                <span>Your Portfolio Overview</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c1_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
        <span style="color: rgb(104, 93, 93);">
        </span>
    </div>
    <span style="color: rgb(104, 93, 93);">
    </span>



    <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 = 'block';
        }

        if (!document.querySelector('.card-selected')) {
        document.getElementById('none_right').style.display = 'block';
        }
        })('c2');">
        <div id="c2_title">
            <strong>
                <span>View Your Tasks</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c2_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </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 = 'block';
        }

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

        })('c3');">
        <div id="c3_title">
            <strong>
                <span>Searching for Customers</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c3_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </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 = 'block';
        }

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

        })('c4');">
        <div id="c4_title">
            <strong>
                <span>Customer Overview</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c4_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
    </div>



    <div class="card" id="c5_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 = 'block';
        }

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

        })('c5');">
        <div id="c5_title">
            <strong>
                <span>View Customer Health</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c5_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
    </div>



    <div class="card" id="c6_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 = 'block';
        }

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

        })('c6');">
        <div id="c6_title">
            <strong>
                <span>Recording Customer Notes</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c6_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
    </div>



    <div class="card" id="c7_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 = 'block';
        }

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

        })('c7');">
        <div id="c7_title">
            <strong>
                <span>Review Dashboards</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c7_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
    </div>
</div>

Right Side (HTML)

<div class="card_right" id="none_right" style="display: block; vertical-align: bottom; font-family: &quot;Noto Sans&quot;, sans-serif;">
    <span class="card-title">
        Welcome to Gainsight CS!
    </span>
    <span>
        <p>To help get you started, we've collated a number of resources to help you hit the ground running as soon as possible.</p>
        <br />
        <p>Want to learn more? Check out our 10-minute <a href="https://education.gainsight.com/gainsight-foundations-nxt-fka-101">Gainsight CS Foundations course</a> from Gainsight University.</p>
        <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/485ed467-e127-467c-841e-853eb9326b40.jpg" alt="Gainsight University Screenshot" height="100%" />
    </span>
</div>

<div class="card_right" id="c1_right" style="display: none; vertical-align: bottom;">

    <span class="card-title">
        Your Portfolio Overview
    </span>
    <span>
        From your homepage, you can get a quick overview of all of your customer accounts. This can include total revenue, number of accounts, current health scores, and much more.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/e3d56602-3128-487d-afeb-752bb2430fee.png" alt="Gainsight CS homepage with Home highlighted" height="100%" />

</div>

<div class="card_right" id="c2_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        View Your Tasks
    </span>
    <span>
        It’s important to keep on top of any tasks or CTAs that either you have created, or Gainsight creates for you. You can manage these under the Cockpit or within the C360/R360 view.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/b015745c-e0a9-4a99-bfe8-ea482f21fee5.png" alt="Gainsight CS homepage with Cockpit highlighted" height="100%" />
</div>

<div class="card_right" id="c3_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        Searching for Customers
    </span>
    <span>
        Whether you’re visiting a customer or they’ve called you. Finding a customer needs to be painless. Use the search bar at the top of your screen to locate customers quickly.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/18b66b88-a1c2-4824-9729-a03a15d45a2a.png" alt="Gainsight CS homepage with the search box highlighted" width="100%" />
</div>

<div class="card_right" id="c4_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        Customer Overview
    </span>
    <span>
        Once you’ve selected your customer from the search, you will be presented with an account overview (C360/R360) showing details such as revenue, account owner, renewal date, and more.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/a0dcf89b-2d70-44a7-ac55-463da9ce359b.png" alt="Gainsight CS homepage with the search box and a customer result highlighted" width="80%" />
</div>

<div class="card_right" id="c5_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        View Customer Health
    </span>
    <span>
        View your customers health by using scorecards. By combining several data points, customer scorecards provide a great insight into your customers health.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/c2ed05c0-dab8-4ffb-bde8-f9de6c49ca50.png" alt="Gainsight CS homepage with scorecard in C360/R360 highlighted" width="80%" />
</div>

<div class="card_right" id="c6_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        Recording Customer Notes
    </span>
    <span>
        There are several places to log notes for customers: Customer Overview, Home, or the Timeline page. It’s great for notes about calls, meetings, or general account updates.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5104a333-4145-4d2a-8395-3dce4a1c5831.png" alt="Gainsight CS homepage with Timeline highlighted" width="70%" />
</div>

<div class="card_right" id="c7_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        Review Dashboards
    </span>
    <span>
        Your Gainsight administrator may have created dashboards for you to review, specific to your organization. To access them, select the Dashboard tab.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/b0844d3e-7b51-4293-8d8e-145b87cffd20.png" alt="Gainsight CS homepage with Dashboards highlighted" width="80%" />
</div>

CSS (Step)

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

.wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: left;
}

#px-4e2214b6-83c2-4a7f-a2c6-cbb2700573b3-fr {
    border-radius: 0 !important;
}

/* Left hand side styling */

.card {
    border-radius: 6px !important;
    padding: 0px 10px;
    font-family: 'Noto Sans', sans-serif;
    height: 40px;
    line-height: 40px;
    align-items: center;
    justify-content: center;
    border: 0px !important;
    background-color: #efefef;
    color: #00000;
    overflow: visible;
    margin: 5px 0px;
}

    .card span {
        font-weight: normal !important;
    }

    /* Styling the arrow on left hand side */

    .card img {
        float: right;
        line-height: 50px;
        margin: auto;
        position: relative;
        right: 0px;
        top: 10px;
    }

    /* What left hand side looks like when hovered over */

    .card:hover {
        cursor: pointer;
        background-color: #48b2eb44;
        color: #000000 !important;
    }

/* Left side navigation - styling once option is selected */

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

    /* Rotate the arrow once the item is selected*/

    .card-selected img {
        transform: rotate(270deg) !important;
    }

/* Styling for the right hand side */

.card_right {
    padding: 6px 6px 6px 20px;
}

    /* Image styling or screenshots on right hand side */
    .card_right img {
        border-radius: 6px;
        margin-top: 10px;
    }

/* Format the title on the left hand side */

.card-title {
    font-weight: bold;
    font-size: 16px;
    clear: right;
    width: 100%;
    display: inline-block;
    padding-bottom: 10px;
    text-align: left;
}

/* Hide card description - not used for this use case */

.card_desc, .card_right {
    display: none;
}

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

#px-921f26d3-0115-4124-b065-0c1eb4b87d77-fr {
    display: none;
}

/* Make the navigation button smooth when clicked */

.px-step-navigation-button {
    transition: .3s ease;
}

Adding menu items

Warning: If you are stuck or unsure about editing HTML/CSS, please consult a developer who can assist accordingly.

If you want to add a new menu item on the left-hand side, you would need to add the following code snippet before the last </div> on the left-hand side:

<div class="card" id="c7_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 = 'block';
        }

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

        })('c7');">
        <div id="c7_title">
            <strong>
                <span>Review Dashboards</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c7_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
    </div>

Don’t forget to increment the number as part of the code. For example, if you are adding an 8th menu item, you would want to change the part that says C7 to C8.

You will also need to add the following code to the right-hand side as well at the very bottom of the code section:

<div class="card_right" id="c7_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        Review Dashboards
    </span>
    <span>
        Your Gainsight administrator may have created dashboards for you to review, specific to your organization. To access them, select the Dashboard tab.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/b0844d3e-7b51-4293-8d8e-145b87cffd20.png" alt="Gainsight CS homepage with Dashboards highlighted" width="80%" />
</div>

Again, don’t forget to increment the number as part of the code from C7 to C8.

Removing menu items

Warning: If you are stuck or unsure about editing HTML/CSS, please consult a developer who can assist accordingly.

Removing menu items is the same as adding but in reverse. On the left-hand side, remove the section you need. A snippet of the code to remove looks like this:

<div class="card" id="c7_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 = 'block';
        }

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

        })('c7');">
        <div id="c7_title">
            <strong>
                <span>Review Dashboards</span>
            </strong>
            <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/5692e7d4-0342-4f6b-b86f-a5cc1bc17135.png" alt="Arrow" width="20" />
        </div>
        <div class="card_desc" id="c7_desc" style="display: block; text-align: left;">
            <span style="color: rgb(104, 93, 93); font-size: 12px;">
            </span>
        </div>
    </div>

Once you’ve removed the menu item from the left-hand side, you can remove it from the right-hand side as well. A snippet of the code to remove looks like this:

<div class="card_right" id="c7_right" style="display: none; vertical-align: bottom;">
    <span class="card-title">
        Review Dashboards
    </span>
    <span>
        Your Gainsight administrator may have created dashboards for you to review, specific to your organization. To access them, select the Dashboard tab.
    </span><br />
    <img src="https://storage.googleapis.com/froala-upload-prod/50c99245-8057-4df7-b9b7-6ee123ff1d48/image/b0844d3e-7b51-4293-8d8e-145b87cffd20.png" alt="Gainsight CS homepage with Dashboards highlighted" width="80%" />
</div>

Changing the Styling

To make it your own, you will need to change the stylesheet (CSS) to match your branding, fonts, and colors for your organization. If you’re unsure of how to do this, I would recommend reaching out to a developer for additional support.

Once launched, this guide will help your new users learn more about how to navigate your product along with some of the use cases available. If you’re feeling confident with the code samples provided, you could even take a stab at using the same code for change management releases, user guides, and much more.

About the Author

My name is Aaron Hatton and I’m a Digital Program Manager at Gainsight, helping develop Digital Customer Success strategies to elevate the Gainsight experience for all our customers and products. Follow me for more useful tips and tricks like this in the future.

Page 1 / 1

Instead of hand-crafting HTML, why not use a slider or an actual guide?

The hard part is figuring out how to divide users into groups and figure out what they need to start. I was hoping for more coverage about that.

Hey @mmarques great question! We find that multiple steps reduce the attention of our users. By creating a single step engagement with multiple points of information (as shown in this example), we saw an increase of new users by as much as 84% and an increase in daily active users across our platform of 23%.

In terms of dividing users into groups, I would love to learn more about what information you are looking for. I’m happy to share how we do things at Gainsight. Please DM me with more information, and I’ll make sure to get a blog post written to help yourself, and others with similar questions

If this is the new approach recommended by Gainsight, it would be great if you could create either a different type of engagement for this, and that you didn’t require us to use HTML coding. You could have sections where we define all the content, and behind-the-scenes, you generate the HTML.

In terms of dividing users into groups, I would love to learn more about what information you are looking for. I’m happy to share how we do things at Gainsight. Please DM me with more information, and I’ll make sure to get a blog post written to help yourself, and others with similar questions

The headline was titled “creating a personalized welcome guide,” so I was expecting more information and recommendations for how much to personalize.

Thanks for the feedback @mmarques! We have spoken with our product teams about this feedback in the past. I’ll sync with your CSM to make sure you’re kept in the loop when this functionality is added natively either via Templates or a new engagement type as you suggested.

Planning

The Build

Adding menu items

Removing menu items

Changing the Styling

About the Author

Reply

Didn't find what you were looking for?

Sign up

Welcome to the Gainsight Community

Scanning file for viruses.

This file cannot be downloaded