Want your website visitors to create their own football lineups without leaving your site? With RenderFoot's free embeddable lineup builder, you can add a fully interactive formation creator to any blog or website in under two minutes.
What You Get
The embedded lineup builder gives your visitors everything they need:
- 12 formations — from classic 4-4-2 to modern 3-4-3
- Player name entry — type in any player name for each position
- Custom team colors — match your club or brand colors
- Field customization — multiple pitch styles and backgrounds
- PNG export — visitors can download their lineup as an image
All of this runs inside a single iframe on your page. It doesn't affect your site's performance or load time.
Step 1: Copy the Embed Code
Here's the iframe snippet you need:
<iframe
src="https://www.renderfoot.com/embed/lineup-builder"
width="100%"
height="600"
frameborder="0"
allowfullscreen
></iframe>
You can also get this code by clicking the Embed button on the lineup builder page — it lets you choose from preset sizes (600x400, 800x600, or responsive).
Step 2: Paste It Into Your Website
WordPress
- Open the page or post where you want the lineup builder
- Click the + button to add a new block
- Search for Custom HTML and select it
- Paste the iframe code into the block
- Click Preview to check it looks right, then Publish
Wix
- Open the Wix Editor for your page
- Click Add in the left sidebar
- Go to Embed Code → Custom Element
- Paste the iframe code
- Drag to resize and position, then publish
Squarespace
- Edit your page and click Add Block
- Choose Code from the block list
- Paste the iframe code
- Make sure Display Source is toggled off
- Save and publish
Any Other Platform
If your website builder supports custom HTML (most do), just paste the iframe code into an HTML block or widget. If you have direct access to your HTML files, paste it wherever you want the builder to appear.
Step 3: Customize the Size
You can change the width and height attributes to fit your layout:
- Fixed size:
width="800" height="600"— good for desktop-focused sites - Responsive:
width="100%" height="600"— adapts to the container width - Compact:
width="600" height="400"— for sidebars or smaller sections
Frequently Asked Questions
Is it really free? Yes. No signup, no API key, no payment. Just copy and paste.
Will it slow down my website? No. The builder loads in an isolated iframe, so it doesn't affect your page's JavaScript or CSS.
Can I use it on multiple pages? Yes. Paste the code on as many pages as you want.
Does it work on mobile? Yes. The builder is fully responsive and works on phones, tablets, and desktops.
Two Ways to Embed
Option 1: Embed the Interactive Tool
Use the iframe code above to place the full interactive lineup builder on your page. Visitors can create their own lineups directly on your site.
Option 2: Embed a Specific Lineup
Already created a lineup you want to showcase? Open the lineup builder, build your lineup, then click the Embed button. RenderFoot will render your lineup as an image, upload it, and give you a unique iframe code that displays your specific lineup with a "Powered by RenderFoot" badge.
This is great for match previews, team announcements, or tactical analysis posts where you want to show a fixed lineup rather than an interactive tool.
Try It Now
Visit the Embed Lineup Builder page to see the interactive embed in action, or go straight to the full lineup builder and click Embed after creating your lineup.
