How to Add a Product Roadmap to Buttercms in 5 Minutes

This guide will show you how to add a Product Roadmap to your Buttercms site in just 5 minutes.

Why add a Product Roadmap to Buttercms?

Adding this feature to your Buttercms site enhances user engagement and improves overall user experience.

What is ProductLift?

ProductLift helps you add valuable features to your site, improving communication with your users.

Let's get started

Here's what we'll do:

1. Create your Product Roadmap in ProductLift
2. Design your Product Roadmap
3. Create a widget for your Product Roadmap
4. Add it to your Buttercms site

Step 1. Create Your Product Roadmap

First, we'll set up your Product Roadmap in ProductLift:

1. Log in to your ProductLift account (or sign up here if you don't have one)
2. Click on "Tabs" in the left sidebar
3. Click "Add Tab" and choose "New Tab"
4. Give your Product Roadmap a name
5. Start adding your content:
   • Add and organize your content as needed

You can edit your content directly in the Product Roadmap tab at any time.

Feel free to click on the cog icon to explore all the editable settings. While you don't need to adjust them right away, it's good to be aware of the available options.

Step 2. Design Your Product Roadmap

Now, let's make your Product Roadmap look great:

1. Click on "Settings" in the left sidebar
2. Choose "Branding"
3. Customize the appearance:
   • Select colors that match your brand
   • Choose appropriate fonts
   • Adjust the layout as needed

ProductLift offers a lot of flexibility in design, so take some time to make it look just right for your site.

Step 3. Create a Widget for Your Product Roadmap

Now, let's create a widget to display your Product Roadmap:

1. Click on "Widgets" in the left sidebar
2. Click "Add New Widget" in the top right
3. Choose the integration method you prefer from the following options: Iframe, Sidebar, Embed,

Configure your widget settings as needed and save your widget.

Step 4. Add to Buttercms

Now, let's get your Product Roadmap live on your site:

4.2 Implement Your Chosen Integration Method

Depending on the method you chose in Step 3, use the appropriate code:

Iframe Method:

<iframe src="YOUR_IFRAME_URL" data-productlift-link width="100%" height="600px" frameborder="0"></iframe>

Replace YOUR_IFRAME_URL with the URL provided in your ProductLift widget settings.

Sidebar Method:

<button class="productlift-sidebar=YOUR_WIDGET_ID">Open Product Roadmap</button>

Replace YOUR_WIDGET_ID with your unique widget ID from the ProductLift dashboard.

Embed Method:

<div class="productlift-embed=YOUR_WIDGET_ID"></div>

Replace YOUR_WIDGET_ID with your unique widget ID from the ProductLift dashboard.

That's it!

Your Product Roadmap should now be live on your Buttercms site.

Troubleshooting Tips

• If the widget doesn't appear, double-check your code implementation
• Try clearing your Buttercms cache
• Check your browser's console for any error messages
• Some platforms may have a delay in displaying new widgets, so give it a few minutes if needed

If you need assistance, don't hesitate to contact our support team at support@productlift.dev.

Advanced Feature: Single Sign-On

For a more integrated experience, you can set up single sign-on (SSO) to automatically log in your users. This is a more advanced feature, but if you're interested, check out our SSO guide.