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:

Customize the title and description text to match your workout
Hide the title or description completely for a cleaner look
Set whether the calculator starts in distance or time mode
Pre-fill default values for distance, time, or split

This is particularly useful for:

Rowing clubs wanting to customize the calculator for specific workouts
Coaches creating training pages with pre-filled workout parameters

Custom Title: Hide title

Custom Description: Hide description

Default Mode:

Hide mode toggle switch

Default Distance (meters):

Default Time (mm:ss or mm:ss.t):

Default Split (mm:ss or mm:ss.t):

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:

Content:
- title - Custom title text (URL encoded)
- description - Custom description text (URL encoded)
- hideTitle=1 - Hide the title completely
- hideDescription=1 - Hide the description completely
- hideToggle=1 - Hide the distance/time mode toggle
Calculator Values:
- mode=time - Start in time mode (defaults to distance mode)
- distance - Initial distance in meters (e.g., 2000)
- time - Initial time in format "XmYY.Zs" (e.g., 7m00.0s)
- split - Initial split time in format "XmYY.Zs" (e.g., 1m45.0s)
Appearance:
- background=white - Use white background (default is light gray #f5f7fa)
- Add box-shadow to iframe style for depth
- Widget requires minimum height of 600px
- Recommended max-width of 450px

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>