TargetSplits.com

Embed the TargetSplits Calculator

Add the TargetSplits rowing calculator to your website with a simple iframe embed. However there are a series of options available if you would like to tailor the widget to a specific time or distance to suit your needs.

Jump to: Basic Implementation | Custom Embed Code Generator | Advanced Implementation

Basic Implementation

Copy and paste this code where you want the calculator to appear:

<iframe
    src="https://targetsplits.com/widget.html"
    width="100%"
    height="600"
    scrolling="no"
    frameborder="0"
    style="border-radius: 8px; max-width: 450px; margin: 0 auto; display: block; overflow: hidden;"
></iframe>
Note: The widget is responsive and will adapt to the width of the iframe. We recommend setting a max-width of 450px for optimal display.

Live Demo (Default)

Custom Embed Code Generator

Use this generator to customize how the calculator appears and behaves on your website. You can:

This is particularly useful for:

Generated Code:

Live Preview:

Advanced Implementation

You can customize the initial values by adding URL parameters:

<iframe
    src="https://targetsplits.com/widget.html?distance=5000&time=20m00.0s"
    width="100%"
    height="600"
    frameborder="0"
    style="border-radius: 8px; max-width: 450px; margin: 0 auto; display: block;"
></iframe>

Customization Options

The widget can be customized using URL parameters in the iframe src:

Note: When using custom text, make sure to URL encode the values to handle spaces and special characters properly.

Example Implementations

// Basic white background
<iframe
    src="https://targetsplits.com/widget.html?background=white"
    width="100%"
    height="600"
    frameborder="0"
    style="border-radius: 8px; max-width: 450px; margin: 0 auto; display: block;"
></iframe>

// Custom title and description
<iframe
    src="https://targetsplits.com/widget.html?title=Team%20Calculator&description=Calculate%20your%20splits"
    width="100%"
    height="600"
    frameborder="0"
    style="border-radius: 8px; max-width: 450px; margin: 0 auto; display: block;"
></iframe>

// Pre-filled 2k test with hidden title
<iframe
    src="https://targetsplits.com/widget.html?hideTitle=1&distance=2000&split=1m45.0s"
    width="100%"
    height="600"
    frameborder="0"
    style="border-radius: 8px; max-width: 450px; margin: 0 auto; display: block;"
></iframe>

// Hide toggle and set fixed distance mode
<iframe
    src="https://targetsplits.com/widget.html?hideToggle=1&distance=2000"
    width="100%"
    height="600"
    frameborder="0"
    style="border-radius: 8px; max-width: 450px; margin: 0 auto; display: block;"
></iframe>