How to use Tampermonkey for product demos | Demostack (2024)

Tampermonkey enables you to make minor and advanced UI/UX changes to your software, which allows you to interact with your audience in real-time and create a memorable product demo. This capability helps you leave a lasting impression, especially when salespeople have just 5% of B2B buyers’ time during the buying journey.

Product demos can help you cut through the noise from competitors, provide value to prospects, and position your product as the solution to potential customers’ needs.

In this blog, we show how to use Tampermonkey for demos and other effective tools to consider, too.

What is Tampermonkey?

Tampermonkey is a browser extension for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox that manages user scripts and allows you to install pieces of code that alter the behavior of a web page. Userscripts are small programs that modify web apps and add useful functionality such as automation, shortcut button additions, layout, and content changes.

Using Tampermonkey for product demos

Personalized product demos have a higher conversion rate than standard demos. To use Tampermonkey to customize a demo for prospects, you’ll need to open a new browser tab for each page of the platform you wish to showcase. For extensive changes, this can easily become 10 to 15 tabs. You'll also need to save the changes on each page after every edit.

In addition to customizing your site, here are three other ways you can use Tampermonkey to enhance your product demo experience:

1. Stage product stories

Tampermonkey allows you to edit elements such as images and texts on a page. This capability enables you to create scenarios that mirror your prospects' day-to-day processes and gives room to demonstrate how your product works in various situations. You can use this method to showcase your product's full range of capabilities and show how it can benefit your customers.

2. Automate tasks

With the Tampermonkey editor, you can automate some tasks, such as auto-filling credentials and filling forms, which can help you save time in demonstrating the efficiency of your product.

3. Debug output

Presales teams can use the Tampermonkey extension to debug issues with web apps. This allows you to troubleshoot before the demo begins. With the debug output setting, you can demonstrate your product’s extensive features with minimal interruptions.

To use the Tampermonkey debugging tool:

• Click on the Tampermonkey icon and select Dashboard
• Go to the Settings tab and click on the “Logging Level”
• Choose the Debug option

How to write a product demo userscript in Tampermonkey

To achieve most of the functions above, you need to understand how to write code in different languages. After installing Tampermonkey with the Chrome Web Store or Firefox Add-ons store, you have access to a library of userscripts that you can modify for your product demo. If none are suitable, you can write a script.

To create a custom script for your demo, follow these steps:

1. Click on the Tampermonkey icon in your browser to open its dashboard.
2. In the Tampermonkey dashboard, click on the "Create a new script" button.
3. Write your script.
4. Save the changes on the page.
5. Test the userscript on the webpage you want to change.

Userscript for changing text on a page

Let's say we want to change text on a page to personalize the product experience. Here's a sample script:

6. Once you've written your script, click on the "Save" button.

In this example, the script is set to run on all pages of the website http://www.example.com/. The button.click() method simulates a click event on a button with class example-class.

Note: You'll need to replace http://www.example.com/ with the URL of your product demo website and update the querySelector argument to target the specific button or element on the page that you want to automate.

Userscript for changing images to personalize a demo

With unique images and text, you can make your product more realistic to prospects. ​​To edit images, use the following code as a starting point:

Product demo tools similar to Tampermonkey

While Tampermonkey is a great tool for enhancing your demo experience, you need a considerable amount of coding experience to effectively use the tool. Also, as with any other browser extension that is capable of modifying a page, Tampermonkey may introduce security concerns such as changing key backend settings and exposing sensitive information — user credentials, for example — to bad actors.

Looking for alternatives?

Consider these three Tampermonkey substitutes that can help you create and improve your product demos:

1. Greasemonkey

Similar to Tampermonkey, Greasemonkey is a browser extension for Firefox that enables users to write or download scripts and save them to a personal library. When users visit a website with a script matching their personal library, Greasemonkey alters the site by applying the relevant scripts.

Here’s a simple process to use Greasemonkey for your demos:

• Install Greasemonkey. If you're using Firefox, you can install Greasemonkey from the Mozilla Add-ons website.
• Write and install your userscript. Greasemonkey userscripts are written in JavaScript. After writing, install your script by clicking on the install button on the userscript's page.

Apply your script. Visit the browser-based software or site your userscript was designed for. The userscript should automatically run and apply its changes to the website.

2. Stylebot

Stylebot — available on Chrome, Microsoft Edge, and Firefox —provides users with a user-friendly interface that can modify the appearance of a website by changing the CSS. With a library of previous user styles, new users can preview, install, and apply templates to their sites.

Here’s how to use Stylebot to customize your demos:

• Open Stylebot. Once you've installed Stylebot, click on the Stylebot icon in your Chrome toolbar to open it.
• Choose a website. Select your demo site by clicking on its name in the Stylebot panel.
• Write custom CSS. Stylebot provides a simple interface for writing CSS, so even if you're new to CSS, you can quickly make changes to enhance the appearance of your demo site or browser-based software.

Save your changes. Once you've made suitable changes, click on the save button to apply your custom styles to the website for your demo.

3. NinjaKit

With Greasemonkey limited to Firefox, NinjaKit is an alternative applicable to Chrome and Safari. You can install NinjaKit from the Chrome Web Store or Safari Extensions Gallery.

Here's how you can get started with using NinjaKit for your product demos:

• Write a userscript. NinjaKit userscripts are written in JavaScript. You can write your own scripts following the steps above or find pre-existing ones that match your needs.
• Install the script. Once you've written or found a userscript, install it by clicking on the install button on your userscript's page.
• Apply your userscript. After you've installed the userscript, you can use it by visiting the site it was designed for. The userscript automatically checks and applies changes to the website.

Between the 10% of demos that will go great and the 10% that will fail — per Robert Falcone, co-founder of Monetate — there’s an 80% middle ground with lots of room for improvement to reach your conversion goals. Yet, many companies still use teleconference or general-purpose online meeting tools such as Zoom, GoTo Meeting, or Hangouts with limited capabilities for product showcasing and other marketing efforts.

Similarly, attempting to scale demo operations can be challenging if you have to learn new source code and programming languages. Even seasoned developers will find the multiple rounds of edits time-consuming. With a new generation of demo experience platforms such as Demostack, you can personalize product demos for each prospect, acquire data to scale your demo operations, and save time.

Use Demostack for better demo experiences

Demostack is a no-code demo experience platform that clones your software, lets you save edits, and shields personally identifiable information (PII) to create the best demo experience for your visitors.

Demostack provides use-case-specific features over general tools, which enables presales teams to win deals faster, enable buyers’ self-education, and drive adoption.

Rather than mastering JavaScript, Demostack provides you with an overlay of edits to personalize demo experiences. With Demostack’s cloning technology, you can replicate the frontend of your product into an independent demo environment that’s built for showcasing.

Ready to uplevel your product demo experience?

Frequently asked questions

How to create a toolbar at the top of a webpage for live demos?

Here's how you can create a toolbar at the top of a webpage using Tampermonkey:

1. Install Tampermonkey. If you're using Google Chrome, you can install Tampermonkey from the Chrome Web Store.
2. Create a new userscript. Click on the Tampermonkey icon in your Chrome toolbar, then click on the "Create a new script" button.

Write the user script. In the user script editor, write the following code:

4. Save the userscript. Click on the "File" menu, then select "Save."

5. Use the toolbar. Visit your product demos site and you should now see a toolbar at the top of the page.

Does Demostack have a leave-behind demo capability?

Yes. Demostack offers a sandbox, which is more than a leave-behind tour after a product demo. With Demostack, you can enable prospects to understand your product’s value faster by staging a sandbox with a product story tailored to your buyer’s business. Presales teams can edit content and data to help prospective customers visualize how your product will impact their business.