Embedding Apps

Learn how to embed your Minivolve apps on any website.

Overview

Embedding your Minivolve apps on your website allows you to provide interactive calculators and tools directly to your users, enhancing their experience and providing valuable functionality without leaving your site.

Before you begin: Make sure your app is published. Only published apps can be embedded on external websites.

Getting the Embed Code

To embed your Minivolve app on a website, you'll need to get the embed code. Here's how:

Log in to your Minivolve account and navigate to your Dashboard.
Find your app in the "My Apps" section.
Click the three dots (⋮) menu on the app card and select "Embed Code".
A dialog will appear with your embed code in an HTML format.
Click the "Copy" button to copy the code to your clipboard.

Tip: You can also access the embed code directly by going to the app details page and clicking the "Embed" button in the top toolbar.

Understanding the Embed Code

The embed code consists of a simple HTML <iframe> element that loads your app from Minivolve's servers. Here's an example of what the code looks like:

<iframe
  src="https://minivolve.app/embed/abc123"
  width="100%" 
  height="500" 
  style="border: 1px solid #eaeaea; border-radius: 8px;" 
  title="Pricing Calculator"
></iframe>

The code includes several attributes that you can customize:

src: The URL of your app (do not modify)
width: The width of the embedded app (default is 100%)
height: The height of the embedded app (default is 500 pixels)
style: CSS styling for the iframe (border, border-radius, etc.)
title: The title of your app for accessibility purposes

Adding the Embed Code to Your Website

Once you have the embed code, you need to add it to your website. The exact process depends on your website platform, but here are general instructions for common platforms:

HTML Website

Open your HTML file in a code editor
Locate where you want the app to appear
Paste the embed code at that location
Save the file and upload it to your server

WordPress

Edit the page where you want to add the app
Switch to the "Text" or "HTML" editor view
Paste the embed code where you want the app to appear
Update or publish the page

Wix

Edit your page in the Wix Editor
Add an "HTML Code" element (Add → Embed → HTML iframe)
Paste the embed code in the HTML box
Click "Update" and publish your site

Shopify

Go to your Shopify admin dashboard
Edit the page where you want to add the app
Click "Add section" → "Custom HTML"
Paste the embed code and save

Note: Some website builders or content management systems may have restrictions on embedding external iframes for security reasons. If you're having trouble embedding your app, check with your platform's documentation or support.

Customizing the Embed

You can customize how your embedded app appears on your website by modifying the iframe attributes:

Adjusting Size

You can change the width and height of the embedded app to fit your website layout:

<iframe
  src="https://minivolve.app/embed/abc123"
  width="800px" 
  height="600px" 
  style="border: 1px solid #eaeaea; border-radius: 8px;" 
  title="Pricing Calculator"
></iframe>

You can specify width in pixels (px) or percentage (%). For responsive designs, using 100% width is recommended.

Styling the Border

You can customize the appearance of the iframe border using CSS in the style attribute:

style="border: 2px solid #3b82f6; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"

This example creates a blue border with rounded corners and a subtle shadow effect.

Removing the Border

If you prefer no border for a seamless integration with your site:

style="border: none;"

Responsive Embedding

To ensure your embedded app works well on all devices, you should make it responsive. Here's a recommended approach:

<div style="position: relative; overflow: hidden; width: 100%; padding-top: 75%;">
  <iframe 
    src="https://minivolve.app/embed/abc123"
    style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 1px solid #eaeaea; border-radius: 8px;" 
    title="Pricing Calculator"
  ></iframe>
</div>

This method creates a responsive container with a fixed aspect ratio (75% in this example, which is a 4:3 ratio). The iframe will resize proportionally as the screen size changes.

Tip: Adjust the padding-top percentage to change the aspect ratio:

56.25% for 16:9 ratio
75% for 4:3 ratio
100% for 1:1 ratio (square)

Testing Your Embedded App

After embedding your app, it's important to test it thoroughly:

Test on multiple devices: Check how your embedded app looks and functions on desktop, tablet, and mobile devices.
Test in different browsers: Ensure your app works correctly in Chrome, Firefox, Safari, and Edge.
Check loading time: Verify that your app loads within a reasonable timeframe on all connection speeds.
Test functionality: Make sure all calculation features work correctly within the embedded app.
Verify appearance: Ensure the app's styling integrates well with your website's design.

Updating Your Embedded App

One of the benefits of embedding a Minivolve app is that any updates you make to your app will automatically appear on your website. Here's how updates work:

Edit your app: Make changes to your app in the Minivolve builder interface.
Save and publish: Once you save and publish your changes, they will automatically be reflected in all embedded instances of your app.
No code changes needed: You don't need to update the embed code on your website when you update your app.
Immediate updates: Changes are typically reflected immediately, though some browsers may cache content for a short period.

Important: If you unpublish your app, it will no longer be accessible on websites where it's embedded. A "Currently Unavailable" message will be displayed instead. Re-publishing the app will restore functionality.

Tracking Usage and Analytics

Minivolve provides analytics for your embedded apps to help you understand how users are interacting with them:

Access analytics: Log in to your Minivolve account and navigate to the Analytics section.
Select your app: Choose the app you want to view analytics for from the dropdown menu.
View metrics: See data on:
- Number of views and calculations
- Average time spent on the app
- Most frequently used fields
- Common calculation results
- User locations and devices
Export data: Download analytics data in CSV format for further analysis or reporting.

Tip: Use analytics data to identify opportunities to improve your app's usability and effectiveness. For more detailed information, see our Analytics Guide.

Troubleshooting

App Not Displaying

If your app isn't showing up on your website:

Verify the app is published in your Minivolve dashboard
Check that the embed code is correctly pasted without modification
Ensure your website allows iframe embedding
Clear your browser cache and refresh

Sizing Issues

If your app appears too small or too large:

Adjust the width and height attributes in the iframe code
Try using the responsive embedding approach described above
Check for any CSS on your website that might be affecting the iframe

Scrolling Issues

If users need to scroll within the app but can't:

Add a scrolling attribute to the iframe: scrolling="yes"
Increase the height of the iframe to reduce the need for scrolling

Need More Help?

If you're having trouble embedding your Minivolve app or have specific questions, our support team is here to help.

Contact Support Back to Help Center