Tuningfiles

Vehicle Catalogue iFrame

Vehicle catalogue iFrame

Embed the catalogue without custom API work

The vehicle catalogue iframe lets you show TuningFiles vehicle data directly on your own website. You configure the look and available options in your account, then copy the generated HTML code into your page.

This is the recommended option when you want a fast integration with automatic updates, responsive height handling and optional JavaScript events.

1. Allowed websites

Add the domains where the iframe will be used. Each website should be on a separate line, and the protocol matters.

  • Add both `https://site.com` and `https://www.site.com` when both versions can be used.
  • Make sure `http://` and `https://` are entered correctly.
  • You can add up to 5 websites.

2. Basic settings

Choose the user-facing defaults for the catalogue before generating the HTML code.

  • Language: Select the language shown in the iframe.
  • Torque units: Select Nm or another available torque unit.
  • Company name: Replace the default branding name with your own company name.

3. Design options

Use the design settings to make the catalogue fit your website.

  • Theme: Choose the visual layout, such as dark layout with black background.
  • Primary color: Used for main highlights and actions.
  • Secondary color: Used for secondary accents.
  • Dyno chart background: Controls the chart background color.
  • Custom CSS: Add valid CSS to override selected styling. Do not include `<style>` tags.

4. Display options

Toggle the content and branding elements that should be visible in the iframe.

  • Show logo.
  • Show the "Please Select Your Vehicle" label.
  • Show brand and model photos.
  • Show unbranded photos, if available for your subscription.
  • Show dyno chart.
  • Show copyright notice.

HTML Code

Copy the generated embed code

After saving the settings, open the HTML Code tab and copy the generated code into your website where the catalogue should appear.

<script src="https://configurator.tuningfileserver.com/assets/app-assets/vendors/iframe-resizer/iframeResizer.min.js"></script>
<iframe
  src="https://configurator.tuningfileserver.com/catalogue/iframe/YOUR_IFRAME_ID"
  id="tuningconfigurator-iframe"
  width="100%"
  frameborder="0"
  scrolling="no"></iframe>
<script>
document.getElementById('tuningconfigurator-iframe').addEventListener('load', function () {
  iFrameResize({ heightCalculationMethod: 'taggedElement' }, '#tuningconfigurator-iframe');
});
</script>

About iframe resizing

The iframe uses the iFrame Resizer library to automatically adjust its height to the loaded catalogue content. The script is optional, but recommended. Without it, you must set and maintain a fixed iframe height yourself.

WordPress

Add the iframe to a WordPress page

Use a Custom HTML block so WordPress does not modify the iframe code.

1

Create a page

In WordPress admin, go to Pages / Add New. Give the page a clear title, for example Vehicle Catalogue or Remap Calculator.

2

Add a Custom HTML block

Click the block inserter, search for Custom HTML, and insert that block where the catalogue should appear.

3

Paste the generated code

Paste the full code from the HTML Code tab, including the iFrame Resizer script, iframe tag and resize script. Do not paste it into a normal paragraph or visual text block.

4

Preview and publish

Use Preview to confirm that the selector loads and resizes correctly. When everything looks right, publish the page.

5

Check allowed websites

If the iframe does not load, make sure the exact WordPress domain is added under Allowed websites, including the correct `https://` and `www` version if used.

Events

Listen to iframe events

The iframe can send JavaScript events to the parent website when the visitor changes selection or views remap data.

vehicleTypeSelected

Triggered when vehicle type is changed. Contains ID and name of the selected vehicle type.

vehicleBrandSelected

Triggered when vehicle brand is changed. Contains ID and name of the selected brand.

vehicleModelSelected

Triggered when vehicle model is changed. Contains ID and name of the selected model.

vehicleGenerationSelected

Triggered when vehicle generation is changed. Contains ID and name of the selected generation.

vehicleEngineSelected

Triggered when vehicle engine is changed. Contains ID and name of the selected engine.

showRemapSubmitted

Triggered when the show remap button is submitted. Contains selected vehicle data such as type, brand, model, generation and engine.

performanceDataReceived

Triggered after vehicle performance data is rendered. Contains OEM power and torque, available remap stages and values.

Example event listener

<script>
window.addEventListener('message', handleMessage, false);

function handleMessage(event) {
  if (event.origin !== 'https://tuningconfigurator.com') {
    return;
  }

  try {
    var eventData = JSON.parse(event.data);

    if (eventData.hasOwnProperty('tfIframeEvent')) {
      console.log('Received ' + eventData.tfIframeEvent + ' event');
      console.log(eventData.data);
    }
  } catch (e) {
    // Not a valid JSON message.
  }
}
</script>

Need help setting it up?

Contact us if you need help choosing the right configuration, branding options or allowed website setup for your vehicle catalogue iframe.

Login Contact us