Guide Showcase

<p class="eyebrow">New Feature Announcement</p>
<h1>Acme Widget</h1>
<p>We are pleased to announce our new product offering - Acme Widget. Built from the ground up to provide you with the best that technology can provide. You can learn more about this feature on our <a href="http://pendo.io" target="_blank">support site</a>.
<br><br>
<button class="dismiss-button" onclick="pendo.onGuideDismissed();">Got It!</button>
/* Copy this into your CSS tab */ 
.eyebrow {
    margin-bottom: 0px;
    text-transform: uppercase;
    font-size: 12px;
    color: #bbb;
}
h1 {
    color: #444;
    font-size: 36px;
    line-height: 140%;
    margin: 0 0 15px 0;
    padding-top: 0;
}
p {
    color: #888;
    font-size: 16px;
}
a {
    color: #2ca0c8;
}
a:hover {
    color: #2ca0c8;
    text-decoration: underline;
}
.dismiss-button {
    margin: 10px 0 0 0;
    background-color: #333;
    color: #fff;
    font-weight: normal;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 140%;
    white-space: nowrap;
    background-image: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.dismiss-button:hover {
    background-color: #111;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    background-color: white;
    padding: 40px;
    color: #999;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    /* -- Content area -- use for font attributes, padding, etc. */
    text-align: left;
    padding: 0;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 32px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
     /* Close guide icon hover effects*/
     color: #999;
}>
<iframe width="468" height="260" src="https://www.youtube.com/embed/<%= template.youtubeID %>?autoplay=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
<div class="text">
    <p class="eyebrow">New Feature Announcement</p>
    <h1>Acme Widget</h1>
    <p>We are pleased to announce our new product offering - Acme Widget. Built from the ground up to provide you with the best that technology can provide.</p>
    <a class="link-button" href="" target="_blank">Learn More »</a>
    <a class="cancel-link" href="#" onclick="pendo.onGuideDismissed();">Dismiss</a>
</div>
/* Copy this into your CSS tab */ 
.eyebrow {
    margin: 20px 0 -5px 0;
    text-transform: uppercase;
    font-size: 12px;
    color: #bbb;
}
.text {
    padding:0 30px 80px;
}
h1 {
    color: #444;
    font-size: 34px;
    margin: 0 0 10px 0;
}
p {
    color: #888;
    font-size: 16px;
    line-height: 140%;
}
a {
    color: #2ca0c8;
}
a:hover {
    color: #2ca0c8;
    text-decoration: underline;
}
.link-button {
    margin: 10px 0 0 0;
    background-color: #333;
    color: #fff;
    font-weight: normal;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 8px 15px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    line-height: 140%;
    white-space: nowrap;
    background-image: none;
    text-align: center;
    vertical-align: middle;
    float:left;
}
.link-button:hover {
    color: #fff;
    text-decoration: none;
    background-color: #111;
}
.cancel-link {
    font-size: 14px;
    margin: 16px 0 0 15px;
    float:left;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    background-color: white;
    padding: 00px;
    color: #999;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    /* -- Content area -- use for font attributes, padding, etc. */
    text-align: left;
    padding: 0;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 32px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/
    color: #999;
}>
<div id="content-wrapper">
    <div id="content">
        <div id="left">
            <center><img alt="click here" width="250" height="263" src="https://storage.googleapis.com/pendo-static-4697301310242816/d4bade7f-1f30-4cf3-4939-51049d0616ba" /></center>
        </div>
        <div id="right">
            <p class="eyebrow">New Feature!</p>
            <p class="title">Feature Name</p>
            <p>Here is a little bit about the new feature we are launching! It will help you collect better insights into your data. Check out what we've added!</p>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
            <button class="dismiss-button" onclick="pendo.onGuideDismissed();">Got It</button>
        </div>
    </div>
</div>
/* Copy this into your CSS tab */ 
.eyebrow {
    margin-bottom: 0px;
    text-transform: uppercase;
    font-size: 12px;
    color: #bbb;
    letter-spacing:.75px;
}
h1 {
    color: #444;
    font-size: 24px;
    margin-top:5px;
    line-height: 140%;
    padding-top: 0;
}
p {
    color: #444;
    font-size: 14px;
    line-height: 140%;
}
a {
    color: #6994bb;
    font-size:16px;
}
a:hover {
    color: #0b253d;
    text-decoration: underline;
}
.dismiss-button {
    margin: 10px 0 0 0;
    background-color: #EC2059;
    color: #fff;
    font-weight: normal;
    cursor: pointer;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 140%;
    white-space: nowrap;
    background-image: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.dismiss-button:hover {
    background-color: #FF3467;
}
/* -- Two Column CSS -- */
#content-wrapper {
    display:table;
    width:100%;
    height:100%;
    position: relative;
}
#left {
    width:50%;
    background-color:#ec2059;
    vertical-align:middle;
}
#right {
    width:50%;
    padding:60px 30px 60px 30px;
    vertical-align:middle;
}
#content {
    display:table-row;
}
#content div {
    display:table-cell
}
ul {
    color: #2a2c35;
    font-size: 14px;
    line-height: 140%;
    padding-left:20px;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    background-color: white;
    color: #999;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    /* -- Content area -- use for font attributes, padding, etc. */
    text-align: left;
    padding: 0;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 32px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/
    color: #999;
}>
<p style="text-align:center"><img alt="" width="100" height="89" src="https://storage.googleapis.com/pendo-static-4697301310242816/0fc9fa8c-cb82-4253-6c9b-91d97369e1f7"></p>
<p><br><span style="color: rgb(236, 32, 89); font-family: proxima-nova-condensed, Arial, sans-serif; font-size: 34px; font-weight: 900; line-height: 0.8em; text-transform: uppercase;">System Maintenance</span></p>
<p>This template is designed to announce a planned outage for maintenance, or an unforeseen degradation of service. A link to your <a href="http://status.io">system status page</a> would be useful here.</p>
<p class="small">And make sure to apologize if your service is truly down.</p>
/* Copy this into your CSS tab */ 
h1 {
    color: #ec2059;
    font-size: 34px;
    margin: 0 0 15px 0;
}
p {
    color:#444;
    font-size:16px;
}
.small {
    font-size: 12px;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    background-color: white;
    padding: 40px;
    color: #999;
    font-size: 18px;
    line-height:140%;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
   /* -- Content area -- use for font attributes, padding, etc. */
    text-align: center;
    padding: 0;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 32px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/
    color: #999;
}>
<h4>Walkthrough Step Name</h4>
<p>An introduction to the purpose of this walkthrough step and a button to go to the next step.</p>
<button class="_pendo-guide-next_ next-button" onclick="pendo.onGuideAdvanced(); pendo.showGuideByName('Track Undefined Flow with a Path') ">Next »</button>
/* Copy this into your CSS tab */ 
h4 {
    color: #fff;
    font-size: 18px;
    margin: 5px 0 15px 0;
    padding: 0;
}
p {
    color: #aaa;
    font-size: 14px;
    line-height: 140%;
}
a {
    color: #5fc4e8;
    font-size: 14px;
    line-height: 140%;
}
a:hover {
    text-decoration: underline;
}
.next-button {
    background-color: #ec2059;
    color: #fff;
    border-radius: 3px;
    margin: 10px 0 0 0;
    border: 1px solid transparent;
    padding: 8px 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: inherit;
    white-space: nowrap;
    background-image: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.next-button:hover {
    background-color: #ff3467;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    border-radius: 6px;
    background: #333;
    border: none;
    padding: 30px;
    color: #bbb;
    font-size: 14px;
    line-height: 140%;
    font-weight: 300;
    font-family: inherit;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    text-align: left;
    padding: 0;
}
._pendo-guide-container_  ._pendo-close-guide_ {
    /* Close guide icon */    
    display: inline;
    font-size: 28px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #999;
}
._pendo-guide-container_  ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/   
    color: #666;
}
/* -- Pointer at edge of tooltip -- */
_pendo-guide-arrow_, ._pendo-guide-arrow-border_ {
    position: absolute;
    font-size: 0;
    line-height: 0;
    margin: 0;
    width: 0;
    height: 0;
    padding: 0;
    border-style: solid;
}
._pendo-guide-arrow-top_, ._pendo-guide-arrow-border-top_ {
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent;
}
._pendo-guide-arrow-left_, ._pendo-guide-arrow-border-left_ {
    border-left: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
._pendo-guide-arrow-right_, ._pendo-guide-arrow-border-right_ {
    border-right: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
._pendo-guide-arrow-bottom_, ._pendo-guide-arrow-border-bottom_ {
    border-bottom: 0;
    border-right-color: transparent;
    border-left-color: transparent;
}
._pendo-guide-arrow_ {
    z-index: 100;
}
._pendo-guide-arrow-top_ {
    border-bottom-color: #333;
}
._pendo-guide-arrow-left_ {
    border-right-color: #333;
}
._pendo-guide-arrow-right_ {
    border-left-color: #333;
}
._pendo-guide-arrow-bottom_ {
    border-top-color: #333;
}
._pendo-guide-arrow-border-top_ {
    border-bottom-color: #333;
}
._pendo-guide-arrow-border-left_ {
    border-right-color: #333;
}
._pendo-guide-arrow-border-right_ {
    border-left-color: #333;
}
._pendo-guide-arrow-border-bottom_ {
    border-top-color: #333;
}>
<h4>Walkthrough Step Name</h4>
<p>An introduction to the purpose of this walkthrough step and a button to go to the next step.</p>
<button class="_pendo-guide-next_ next-button" onclick="pendo.onGuideAdvanced(); pendo.showGuideByName('Track Undefined Flow with a Path') ">Next »</button>
/* Copy this into your CSS tab */ 
h4 {
    color: #fff;
    font-size: 18px;
    margin: 5px 0 15px 0;
    padding: 0;
}
p {
    color: #bbb;
    font-size: 14px;
    line-height: 140%;
    font-weight: inherit;
}
a {
    color: #5fc4e8;
    font-size: 14px;
    line-height: 140%;
}
a:hover {
    text-decoration: underline;
}
.next-button {
    background-color: #ec2059;
    color: #fff;
    border-radius: 3px;
    margin: 10px 0 0 0;
    border: 1px solid transparent;
    padding: 8px 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: inherit;
    white-space: nowrap;
    background-image: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.next-button:hover {
    background-color: #ff3467;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    background-color: #333;
    padding: 30px;
    border: none;
    color: #bbb;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    font-family: inherit;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    text-align: left;
    padding: 0;
}
._pendo-guide-container_  ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 28px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #999;
}
._pendo-guide-container_  ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/ 
    color: #666;
}>
<p style="text-align:center"><img alt="" width="150" height="150" src="https://storage.googleapis.com/pendo-static-4697301310242816/73dec12d-9190-477a-6158-8f12f64e881b"></p>
<br>
<h3>All Done!</h3>
<p>Use this template as the final step in a walkthrough.
<br>You can <a style="background-color: rgb(51, 51, 51);" href="#">link out to your knowledge base</a> for more information and next steps.</p>
<p>
<button class="dismiss-button" onclick="pendo.onGuideDismissed();">Awesome!</button>
</p>
/* Copy this into your CSS tab */ 
h3 {
    color: #fff;
    font-size: 26px;
    margin: 5px 0 15px 0;
}
p {
    font-size: 14px;
    color: #aaa;
}
a {
    color: #5fc4e8;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.dismiss-button {
    background-color: #ec2059;
    color: #fff;
    border-radius: 3px;
    margin: 10px 0 0 0;
    border: 1px solid transparent;
    padding: 8px 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: inherit;
    white-space: nowrap;
    background-image: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.dismiss-button:hover {
    background: #FF3467;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    background-color: #333;
    padding: 30px;
    border: none;
    color: #bbb;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
/* -- Content area -- use for font attributes, padding, etc. */
    text-align: center;
    padding:0;
}
._pendo-guide-container_  ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 28px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #999;
}
._pendo-guide-container_  ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/ 
    color: #666;
}>
CSS formatting only - create a guide with your content and a poll. Then add CSS.
/* Add your content and a poll to your Guide. Then copy this into your CSS tab to edit your guide prompt and button*/ 
._pendo-poll-question-prompt_ {
    font-size: 14px;
    font-weight: bold;
}
._pendo-poll-submit_ {
    display: block;
    width: 100%;
    margin-top: 10px;
    background-color: #ec2059;
}
._pendo-poll-submit_:hover {
    display: block;
    width: 100%;
    margin-top: 10px;
    background-color: #FF3467;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    border-radius: 6px;
    background-color: white;
    padding: 30px;
    color: #666;
    font-size: 14px;
    line-height: 140%;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    /* -- Content area -- use for font attributes, padding, etc. */
    text-align: left;
    padding: 0;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 28px;
    text-align: right;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/
    color: #999;
}>
<p><img alt="click here" width="40" height="40" src="https://storage.googleapis.com/pendo-static-4697301310242816/e21d420f-6d36-496b-5073-af8b917b4837">  Click here to continue!</p>
/* Copy this into your CSS tab */ 
p {
    color: #FFFFFF;
    font-size: 14px;
    font-weight:500;
    display: table-cell;
    vertical-align: middle;
    padding-top:10px;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    border-radius:6px;
    border-color:#EC2059;
    background-color: #EC2059;
    color: #666;
    font-size: 14px;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    /* -- Content area -- use for font attributes, padding, etc. */
    text-align: center;
    padding-bottom:20px;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: inline;
    font-size: 28px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
    display: none;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/
    color: #999;
}
._pendo-guide-arrow-top_, ._pendo-guide-arrow-border-top_ {
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent;
}
._pendo-guide-arrow-left_, ._pendo-guide-arrow-border-left_ {
    border-left: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
._pendo-guide-arrow-right_, ._pendo-guide-arrow-border-right_ {
    border-right: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
._pendo-guide-arrow-bottom_, ._pendo-guide-arrow-border-bottom_ {
    border-bottom: 0;
    border-right-color: transparent;
    border-left-color: transparent;
}
._pendo-guide-arrow_ {
    z-index: 100;
}
._pendo-guide-arrow-top_ {
    border-bottom-color: #EC2059;
}
._pendo-guide-arrow-left_ {
    border-right-color: #EC2059;
}
._pendo-guide-arrow-right_ {
    border-left-color: #EC2059;
}
_pendo-guide-arrow-bottom_ {
    border-top-color: #EC2059;
}
._pendo-guide-arrow-border-top_ {
    border-bottom-color: #EC2059;
}
._pendo-guide-arrow-border-left_ {
    border-right-color: #EC2059;
}
._pendo-guide-arrow-border-right_ {
    border-left-color: #EC2059;
}
._pendo-guide-arrow-border-bottom_ {
    border-top-color: #EC2059;
}>
<center>
<p style="text-align:center"><img alt="Check" width="145" height="145" src="https://storage.googleapis.com/pendo-static-4697301310242816/26727b59-a9ce-4ab6-4bc9-0335fdecf9b0" /></p>
<h1>Check this out</h1>
<p>Click here to find new updates about - Acme App and this product.</p>
<button class="dismiss-button" onclick="pendo.onGuideDismissed();">Ok got it!</button>
</center>
/* Copy this into your CSS tab */ 
h1 {
    color: #444;
    font-size: 16px;
    margin: 20px 0px 10px 0;
}
p {
    color: #aaa;
    font-size: 14px;
    line-height: 150%;
}
a {
    color: #6994bb;
}
a:hover {
    color: #0b253d;
    text-decoration: underline;
}
.dismiss-button {
    margin: 10px 0 0 0;
    background-color: #333;
    color: #fff;
    font-weight: normal;
    cursor: pointer;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 140%;
    white-space: nowrap;
    background-image: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.dismiss-button:hover {
    background-color: #111;
}
/* --- Selectors from Global CSS --- */
._pendo-guide-container_ {
    /* -- Guide border, shadow, background, etc. -- */
    border-radius: 3px;
    background-color: white;
    padding: 30px;
    padding-top:15px;
    color: #666;
    font-size: 12px;
    line-height: 140%;
    font-weight: 300;
}
._pendo-guide-container_ ._pendo-guide-content_ {
    /* -- Content area -- use for font attributes, padding, etc. */
    text-align: left;
    padding: 0;
}
._pendo-guide-container_ ._pendo-close-guide_ {
    /* Close guide icon */ 
    display: none;
    font-size: 28px;
    font-weight: 100;
    top: 6px;
    right: 15px;
    color: #ccc;
}
._pendo-guide-container_ ._pendo-close-guide_:hover {
    /* Close guide icon hover effects*/
    color: #999;
}>

Webinar

How VTS Engages Users with In-App Messages

View The Space (VTS), an end-to-end leasing platform for commercial real estate share how they use Pendo to better understand the needs of their different user segments, and best practices for engaging them with targeted in-app messages.

Watch the Webinar