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