Integration Guide | ECU Remap Calculator Widget for Websites

📚 Contents

Quick Start (60 seconds)
WordPress Integration
Wix Integration
Squarespace Integration
Custom HTML
Customization Options
Troubleshooting

⚡ Quick Start

Add this single line of code anywhere in your website:

<script src="https://tunegains.com/widget.js?key=YOUR_API_KEY"></script>

Replace YOUR_API_KEY with the key from your dashboard.

📝 WordPress Integration

Option 1: Using Theme Editor

Go to Appearance → Theme Editor
Open footer.php
Paste the script before </body>
Save changes

Option 2: Using Shortcode (Recommended)

// Add to functions.php
function tunegains_widget() {
    return '<div id="tunegains-widget"></div>
    <script src="https://tunegains.com/widget.js?key=YOUR_API_KEY"></script>';
}
add_shortcode('tunegains', 'tunegains_widget');

Then use [tunegains] shortcode in any page or post.

🎨 Wix Integration

In Wix Editor, click Add (+)
Select Embed → Embed a Widget
Choose Embed HTML
Paste the following code:

<div id="tunegains-widget"></div>
<script src="https://tunegains.com/widget.js?key=YOUR_API_KEY"></script>

⬜ Squarespace Integration

Edit the page where you want the widget
Click Add Block → Code
Paste the embed code
Set display to HTML
Save and publish

💻 Custom HTML

Add the script tag before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
    <title>Your Tuning Shop</title>
</head>
<body>
    <!-- Your website content -->
    
    <!-- TuneGains Widget -->
    <script src="https://tunegains.com/widget.js?key=YOUR_API_KEY"></script>
</body>
</html>

🎨 Customization Options

Add data attributes to customize the widget:

Attribute	Description	Default
`data-color`	Primary accent color (hex)	`#FF4500`
`data-position`	Widget position	`bottom-right`
`data-booking-url`	Your booking page URL	`none`
`data-show-stages`	Which stages to show	`1,2,3`

Example with custom options:

<script 
    src="https://tunegains.com/widget.js?key=YOUR_API_KEY"
    data-color="#0066FF"
    data-position="bottom-left"
    data-booking-url="https://yoursite.com/book"
></script>

🔧 Troubleshooting

Widget not appearing?

Check that your API key is correct and your subscription is active.

Styling conflicts?

The widget uses Shadow DOM to prevent CSS conflicts. If issues persist, contact support.

Slow loading?

The widget is lazy-loaded and typically loads in under 200ms. Check your internet connection.

Still having issues? Contact our support team.

Integration Documentation