Tous les guides
Annonce d'une nouvelle fonctionnalité

<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

<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

<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

<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

<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

<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

<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

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

<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

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