Free website widgets

Add a hiking calculator to your website

Choose a calculator, copy its HTML, and paste it into your blog, shop, club site, or trail guide. Every widget is free to use. The one condition is that you keep the visible Peak Gear Guide credit line included with the code.

Seven embeddable outdoor tools

Each block below contains the live embed code for one tool. Use the copy button, then paste the complete snippet into your site. The calculator stays hosted by Peak Gear Guide; you do not need to install or maintain its code.

Widget 1 of 7

Hiking Gear Quiz

Builds a personalized kit from five questions—useful on beginner guides, scout pages, and outdoor shop resources. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/gear-quiz" width="100%" height="800" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Hiking Gear Quiz" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/gear-quiz">hiking gear quiz</a> by Peak Gear Guide</p>

Widget 2 of 7

Hiking Pace Calculator

Estimates hiking time from distance, elevation, fitness, pack weight, and trail conditions—ideal for route and trail guides. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/hiking-pace-calculator" width="100%" height="760" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Hiking Pace Calculator" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/hiking-pace-calculator">hiking pace calculator</a> by Peak Gear Guide</p>

Widget 3 of 7

Hiking Water Needs Calculator

Estimates water needs from the hiker, route, weather, and altitude—useful beside hydration and hot-weather advice. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/water-needs-calculator" width="100%" height="720" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Hiking Water Needs Calculator" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/water-needs-calculator">hiking water calculator</a> by Peak Gear Guide</p>

Widget 4 of 7

Backpacking Fuel Calculator

Calculates stove fuel for a trip and group—useful on backpacking menus, stove guides, and trip-planning pages. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/backpacking-fuel-calculator" width="100%" height="720" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Backpacking Fuel Calculator" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/backpacking-fuel-calculator">backpacking fuel calculator</a> by Peak Gear Guide</p>

Widget 5 of 7

Backpacking Calories Calculator

Estimates daily trail calories and food weight—useful for meal-planning articles, guides, and outfitter resources. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/backpacking-calories-calculator" width="100%" height="760" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Backpacking Calories Calculator" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/backpacking-calories-calculator">backpacking calorie calculator</a> by Peak Gear Guide</p>

Widget 6 of 7

Gear Weight Calculator

Totals base weight and carried weight by gear category—useful for pack lists, ultralight blogs, and gear shop content. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/gear-weight-calculator" width="100%" height="800" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Gear Weight Calculator" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/gear-weight-calculator">gear weight calculator</a> by Peak Gear Guide</p>

Widget 7 of 7

Sleeping Bag Temperature Calculator

Suggests a sleeping bag temperature rating from expected conditions and sleep style—useful for sleep-system guides and shops. Open the full tool

Embed this calculator on your site

Bloggers and outfitters: this tool is free to embed. Paste the code below anywhere HTML is allowed — please keep the credit line.

<iframe src="https://peakgearguide.com/embed/sleeping-bag-calculator" width="100%" height="720" style="border:1px solid #27272a;border-radius:12px;max-width:760px" title="Sleeping Bag Temperature Calculator" loading="lazy"></iframe>
<p style="font-size:14px;margin-top:6px">Free <a href="https://peakgearguide.com/tools/sleeping-bag-calculator">sleeping bag temperature calculator</a> by Peak Gear Guide</p>

How to embed a calculator widget

Paste the whole snippet, including the paragraph below the iframe. Publish a preview first so you can check the height on desktop and mobile.

Raw HTML

Copy a tool’s complete snippet and paste it where you want the calculator to appear in your page HTML. Keep both the iframe and the credit paragraph together.

WordPress

In the block editor, add a Custom HTML block, paste the complete snippet, then preview the page. WordPress.com plan and site-permission rules may restrict iframe code; check your plan if the preview removes it.

Squarespace

Edit the page, add a Code block, choose HTML if that option appears, and paste the complete snippet. Code and iframe availability can depend on the Squarespace plan and editor permissions.

Wix

In the editor, add an Embed Code element, choose Embed HTML (or the iframe option shown by your editor), and paste the snippet. Resize the element so the full calculator is visible.

Ghost or a Markdown editor

In Ghost, add an HTML card and paste the complete snippet. In another Markdown editor, use its raw HTML block only if that editor and your publishing platform allow iframes.

Plain terms

Free to use, with one condition

You may embed these tools on any website, including a commercial one. There is no registration, API key, fee, or expiry. Please keep the visible credit line and its link to the original tool.

The embedded routes contain no ad placement and load without the analytics scripts used on the main site. The widget does not add tracking code to the rest of your page.

Frequently asked questions

Are these calculator widgets free?

Yes. You can use them on personal, nonprofit, or commercial sites without registering, requesting an API key, or paying a fee. Please keep the visible credit line included in the snippet.

Will an embedded calculator slow down my page?

The calculator loads in a separate iframe and the snippet uses lazy loading, so browsers can defer it until the visitor approaches it. Like any embedded content, it still adds a separate page request when it loads.

Can I change the widget size?

Yes. The snippet uses a responsive width of 100% with a maximum width of 760 pixels. You can change the height value if the calculator needs more or less vertical space in your layout.

Do I have to keep the credit line?

Yes. Keeping the visible Peak Gear Guide credit link is the one condition of using these free embeds. Copy the complete snippet so the iframe and credit remain together.

Do the widgets work on mobile?

The iframe is set to fill the available width up to 760 pixels, and the calculators use responsive layouts. Make sure the block or column containing the embed is also allowed to use the full mobile width.

What happens if the calculator changes later?

The iframe loads the current calculator from Peak Gear Guide, so updates appear automatically without replacing the embed code. A substantial layout change could require a height adjustment on the host page.

Want to use a calculator without embedding it?

View all hiking tools