Browse Pendo's Guide and In-App Messaging Showcase

New Feature Announcement

HTML
CSS

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

New Feature Announcement with Video

HTML
CSS

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

New Feature Announcement with Image

HTML
CSS

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

System Maintenance

HTML
CSS

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

Walkthrough Step Tooltip

HTML
CSS

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

Walkthrough Step Lightbox

HTML
CSS

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

Walkthrough Success Lightbox

HTML
CSS

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

Poll Tooltip

HTML
CSS

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

Walkthrough Step Tooltip

HTML
CSS

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

Onboarding Tooltip

HTML
CSS

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

PENDO PRODUCT CLOUD

Andere Produkte

UNTERNEHMENSART

ANWENDUNGSFÄLLE

BIBLIOTHEK

COMMUNITY

Code-Beispiele

New Feature Announcement

New Feature Announcement with Video

New Feature Announcement with Image

System Maintenance

Walkthrough Step Tooltip

Walkthrough Step Lightbox

Walkthrough Success Lightbox

Poll Tooltip

Walkthrough Step Tooltip

Onboarding Tooltip