> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Website demos
> Embed interactive demos on your website to increase conversions and qualify leads.
export const MediaCard = ({title = '', url, type = 'demo'}) => {
const attributes = type === 'demo' ? {
'data-navattic-open': url,
'data-navattic-title': title
} : {
'data-video': url
};
return
;
};
"Since launching on our website, Navattic has contributed to 15% of leads{' '}
that we collect on our site. We've also noticed that there is a much higher propensity to
convert to being a Ramp customer if a prospect has completed the self-service product tour."
}
domain="ramp.com"
name="Ramp"
/>
**Website demos** are concise, easy to follow, and value-driven. Include a demo as the primary or secondary CTA on your site to build product awareness and convert top-of-funnel leads. Use an ungated demo to direct traffic toward your primary website CTA or include a Form to send viewer information to your CRM. Consider linking out to a full-screen version of your demo to provide the most immersive viewing experience.
### Recommendations
For a top-of-funnel audience, we recommend:
* Lead with a value-driven introduction and keep dialog text concise ([Blog: Tips from a Copywriting Expert](https://www.navattic.com/blog/interactive-demo-copywriting-tips))
* Include 10-15 steps that tell a compelling story about your product; try a [Checklist]() to organize longer stories
* Embed your demo above the fold for 3.5x website visitor engagement ([How to Promote you Demo](https://www.navattic.com/report/state-of-the-interactive-product-demo-2023#How-to-Promote-your-Interactive-Demo))
### Customer Examples
Below are some customer examples we love. Keep an eye out for the recommendations above.
### Implementation Guide
Follow the guidance below to create a high-converting demo for your marketing site. Demos built with these best practices see on average a 20-30% Flow completion and 10-15% conversion rate. Use [Project Analytics](/analyze) to see drop-offs for each step and to continue improving your demo.
**Steps 1-2**: Start with a value-driven introduction (ex. "Our product demo will show you how powerful Ramp can be for your business"). If using a Form, keep it as brief as possible (90% of current demos with forms include just 1-2 fields)]
**Steps 3-8**: Use Tooltips to highlight a few key features. Remember to include wow moments, skip transitions (e.g., click here to move to next screen), and consider how each feature addresses prospect pain points
**Steps 9-12**: Get ready to conclude your demo. What is one impressive wow moment you can end on? Include 1-2 differentiated CTAs on your last step.
**Blog:** Read our [High Converting Interactive Demos Tips from a Copywriting Expert](https://www.navattic.com/blog/interactive-demo-copywriting-tips) for suggestions and customer examples.
**Build on momentum**: Include a CTA after showcasing major product wow moments. Encourage conversion after every 5-7 steps or enable [escape view](https://training.navattic.com/7429hwxgx) to make CTAs accessible at any point. **Be consistent**: Maintain the same CTAs across your marketing journey to drive conversions towards your main conversion goal (ie, trial signups, demos booked). Utilize [UTM paramaters](https://blog.hubspot.com/customers/understanding-basics-utm-parameters) to track traffic that originates from Navattic.
We recommend providing both gated and ungated assets on your site. An ungated demo is an instant way to provide value to site visitors and to direct traffic towards your primary CTA. If using a form, we recommend including 1-2 fields within the first 5 steps of your demo. Make sure to integrate with your CRM to create or update contacts with demo engagement data.
**Tip:** If using a form to gather leads, use [Personalization](/demos/personalized) to turn form fields into dynamic variables (ie., merge fields) that may be referenced throughout your demo.
**Consider the deployment that shows your product best.** Share your project with end users via a direct link or website embed.Try out various responsiveness strategies and embed settings to find the best fit for presenting your demo. Check out customer example to see different options for successful deployments.
**Tip:** Showcase your demo or demo CTA above the fold for 3.5x website visitor engagement.
## Customer Interview Series
See how Repsly leverages a demo to drive conversion towards a `Book a Demo` CTA. Read about their strategy in the blog: [Customer Interview Series: Website CTA with Craig LeBlanc](https://www.navattic.com/blog/customer-interview-craig-leblanc)
