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
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>
Use this generator to customize how the calculator appears and behaves on your website. You can:
This is particularly useful for:
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>
The widget can be customized using URL parameters in the iframe src:
title
- Custom title text (URL encoded)description
- Custom description text (URL encoded)hideTitle=1
- Hide the title completelyhideDescription=1
- Hide the description completelyhideToggle=1
- Hide the distance/time mode togglemode=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)background=white
- Use white background (default is light gray #f5f7fa)box-shadow
to iframe style for depth// 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>