embed-code-generator

The Embed Code Generator lets you quickly create the snippet of code needed to place a Rate.net display widget on any web page — no developer required. Follow the steps below to build your embed code in just a few minutes.

Step-by-Step Instructions

Open the Embed Code Generator

Navigate to rate.net/embed-code-generator. You'll see a short form in the center of the page.

Enter Your API Key

Paste your institution's unique API Key into the API Key field. This key identifies your organization and must be in GUID format (a string of letters and numbers separated by dashes, like xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).

The field will show a validation message if the format looks incorrect — double-check for any extra spaces if that happens.

Enter the Display URL

Paste the full URL of the Rate.net display kit you want to embed into the Display URL field. This URL was provided when your display was set up (it begins with https://).

Choose a Display Type

Use the Display Type dropdown to select the style of widget you want to show. This must match the type of display kit your URL points to. Common options include Walletshare, Vertical Bars, Slider, Single Product Tile, Ad, Widget, Competitive Comparison Bar Chart, and more.

If you're not sure which to pick, check with your Rate.net account manager — the wrong type can affect how the widget renders.

Set a Market ID (if needed)

The Market ID field is optional. If your display is configured for a specific market or region, enter that ID here. Leave it blank if it doesn't apply.

Select Product Classes (optional)

The Product Class Selection section controls which financial product types appear in the widget. Auto is the default and shows all eligible products. To narrow the focus — e.g., only Mortgage or CD products — check the boxes you want. Use Select All or Clear All as shortcuts.

Generate Your Embed Code

Click "Generate Embed Code & Load Display." A Live Preview of the widget will load below the form, and the Generated Embed Code box will populate with the HTML snippet ready to use.

Copy and Paste the Embed Code

Click Copy Embed Code to copy the snippet to your clipboard. Then open your CMS (HubSpot, WordPress, etc.), navigate to the page where the widget should appear, and paste the code into an HTML or Custom Code block. Save and publish — your Rate.net widget is now live!

Field Reference

Field	What to Enter	Required?
API Key	Your institution's API key in GUID format	Required
Display URL	Full URL of the Rate.net display kit	Required
Display Type	Style/layout of your widget — must match your display kit	Required
Market ID	Market or region identifier, if applicable	Optional
Product Class	Financial product category (or categories) to display	Optional

Tips & Troubleshooting

Always check the Live Preview before copying the embed code.
If the preview doesn't load, double-check your API Key — it must be in GUID format with no extra spaces.
Make sure the Display Type matches the widget your Display URL was built for.
In HubSpot, use an HTML module (not a rich text block) so the code isn't stripped out.
If you intend to place more than one display on the same page, please contact your Rate.net representative — there are technical considerations involved and they can provide the correct embed code setup for that scenario.
Product Class filters are great for featuring only one product type on a specific landing page (e.g., Mortgages only on your home loan page).
Displays are fully responsive — once embedded, the widget will automatically resize to fill whatever container or column it's placed in on your page. No extra sizing configuration is needed.

Need help with your API Key or Display URL?

Contact Rate.net →

Welcome to the Embed Code Generator

Create an embed code from your preview link below

Generated Embed Code