Tous les guides

Annonce d'une nouvelle fonctionnalité

Fenêtres lightbox 
<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;
}

Annonce d'une nouvelle fonctionnalité avec vidéo

Fenêtre lightbox avec vidéo 
<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;
}

Annonce d'une nouvelle fonctionnalité avec image

Fenêtre lightbox à deux colonnes 
<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;
}

Maintenance du système

Fenêtre lightbox de maintenance du système 
<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;
}

Info-bulle pour une étape de tutoriel

Info-bulle pour une étape de tutoriel 
<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;
}

Fenêtre lightbox pour une étape de tutoriel

Fenêtre lightbox pour une étape de tutoriel 
<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;
}

Fenêtre lightbox de validation de dernière étape de tutoriel

Fenêtre lightbox de confirmation 
<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;
}

Info-bulle de sondage

Sondage 
Formatage CSS uniquement - créez un guide avec votre contenu et un sondage, puis insérez le code 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;
}

Info-bulle pour une étape de tutoriel

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

Info-bulle d'accueil

Message d'accueil 
<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;
}