Guide Showcase

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>
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>
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>
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>
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>
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>
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>
HTML
CSS
CSS formatting only - create a guide with your content and a poll. Then add CSS.
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>
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>

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
© 2017 Pendo  |  Terms of Service  |  Privacy Policy

Interested?

Here are two ways you can get started with Pendo today

Request a Custom Demo

Let us show you how
Pendo can improve your
product experience

Schedule a Custom Demo

We would love to give you a tour.

← Back

Sign Up for an Account to Get Started

C'mon in, have a look around.

← Back

Something went wrong, please try again.

Go Back
Close
Close Icon