Drop the Live Rate Widget onto any loan officer website to display real-time mortgage rates and capture more leads from visitors who came looking for rate information.
The Live Rate Widget lets you add real-time mortgage rate information to your loan officer website and customize how it appears. Inside Widget Studio, you can choose layouts, themes, branding, loan programs, titles, daily change visibility, and whether to show an “add a quote” button.
The widget renders real-time mortgage rate information on your site. Visitors see the rates that matter to them, which builds trust and gives them a reason to fill out the form.
Copy the embed snippet and paste it anywhere on your site — a page, a sidebar, a landing page footer.
The Live Rate Widget is a website tool inside LoanOfficer.ai that helps loan officers display mortgage rate information directly on their websites. Instead of sending visitors somewhere else to look for rate updates, you can keep them engaged on your own site with a branded, customizable rate experience.
Rates are one of the most common reasons a borrower visits a mortgage website. They want to know what the market looks like, what programs may be available, and whether it is a good time to take the next step. The Live Rate Widget gives you a way to meet that intent immediately.
From Widget Studio, you can customize the way the widget looks, what loan programs it includes, and how much information appears. You can also align it with your website’s branding by choosing a theme, adjusting colors, and uploading your logo.
Your website should do more than look professional. It should help convert visitors into conversations.
Many borrowers begin their research by searching for mortgage rates. If they land on your website and cannot find rate information, they may leave and continue looking elsewhere. A live rate widget helps reduce that friction by putting relevant information in front of them right away.
For loan officers, this matters for three practical reasons:
The widget is also useful because it is customizable. Not every loan officer wants to show the same programs or the same visual layout. One team may want a clean stack of average rates. Another may prefer a carousel-style display. Another may want to show only certain loan types, such as a 30-year FHA option, and remove programs that are not relevant to their audience.
By controlling the layout, content, and call-to-action visibility, you can make the widget feel like a natural part of your website instead of a generic add-on.
The Live Rate Widget is managed inside Widget Studio, which is located under Company Settings. Widget Studio is where LoanOfficer.ai is adding tools and gadgets that give loan officers more ways to use the platform across their online presence.
Inside the rate widget setup, you can configure several parts of the experience:
These controls let you shape both the visual presentation and the information strategy. For example, if you do not want jumbo rates to appear in your rate stack, you can remove them. If you want FHA rates to appear first, you can change the order. If your website uses a dark background, you can use the dark theme so the widget fits the page.
1. Open Company Settings.
Start by going to Company Settings in LoanOfficer.ai. This is where the Widget Studio is located.
2. Go to Widget Studio.
From Company Settings, open Widget Studio. This area contains website tools, including the rate widget.
3. Select the rate widget.
Choose the rate widget option. This opens the configuration area where you can control how the widget will appear on your website.
4. Choose a layout.
Pick the layout style that best fits your website page. Available layout options shown in the transcript include stack, pill style, and carousel style.
5. Set the theme and branding.
Choose a light or dark theme, adjust the branding color, and upload your logo if you want the widget to match your website and brand identity.
6. Customize the rate content.
Decide which loan programs should appear in the widget. For example, you may choose to include a 30-year FHA option and remove jumbo rates if they are not relevant to your audience.
7. Reorder the rate options.
Adjust the order of the displayed rate programs so the most important or most relevant options appear first.
8. Update the title and display options.
Change the widget title if needed, such as “Today’s Average Rates.” Then decide whether to show the add-a-quote button and whether to display daily rate changes.
A Live Rate Widget works best when it is intentionally configured for your audience and your website design.
Start with your typical borrower. If most of your traffic comes from first-time homebuyers, you may want the widget to focus on the programs they are most likely to ask about. If your audience is more broad, you may prefer to display a wider mix of rate options.
Keep the layout simple. A widget should make the page more useful, not harder to scan. If your page already has a lot of content, a compact layout may be easier to read. If you have a dedicated rates page, a larger stack or carousel-style presentation may make more sense.
Match the theme to the page. Use the light theme on light pages and the dark theme on darker sections. Consistent design helps the widget feel native to your site.
Use a clear title. A heading like “Today’s Average Rates” tells visitors exactly what they are looking at. Avoid vague labels that make borrowers work harder to understand the information.
Be thoughtful with the quote button. If your goal is lead capture, leaving the add-a-quote button visible can help move interested visitors into a conversation. If the widget is being used in a more educational or informational section, you may decide to turn it off.
Consider whether daily change is helpful for your audience. Showing daily movement can make the widget feel timely and current. However, if your audience may misunderstand small movements, you may choose a simpler display.
One common mistake is showing too many rate options. More information is not always better. If the list is crowded or includes programs that are not relevant to your market, borrowers may feel overwhelmed.
Another mistake is ignoring the page design. A widget that uses the wrong theme or clashing colors can make your website feel inconsistent. Take the time to align the widget with your existing branding.
Loan officers may also forget to update the title. The default title may work, but a more specific phrase can make the widget clearer and more compelling for visitors.
A final mistake is hiding the call to action without a reason. If a visitor is already looking at rates, they may be close to raising their hand. If lead capture is the goal, make sure there is a clear path to request a quote or continue the conversation.
Imagine a loan officer wants to create a rates section on their website for borrowers who are comparing options.
They open Company Settings, go to Widget Studio, and select the rate widget. Because the website has a clean, modern design, they test a pill-style layout first. The page background is light, so they choose the light theme and update the widget color to match their brand.
Next, they upload their logo so the widget feels connected to the rest of the site. They review the available rate programs and decide to remove jumbo rates because that is not a major part of their current marketing focus. They keep the 30-year FHA option because it is relevant to many of their website visitors.
They then reorder the rate options so the most common programs appear first. For the title, they use “Today’s Average Rates” because it is simple and easy to understand.
Finally, they decide to leave the add-a-quote button turned on. Their goal is to convert rate shoppers into conversations, so the button gives visitors a clear next step. They also choose whether to show the daily change indicator based on how much rate movement detail they want the visitor to see.
The result is a branded website element that gives borrowers the rate information they came for while supporting the loan officer’s lead generation strategy.
The Live Rate Widget gives loan officers a simple way to add mortgage rate information to their websites. It is managed through Widget Studio under Company Settings and includes controls for layout, theme, branding, displayed programs, title text, quote button visibility, and daily change display.
Use the widget to make your website more useful for rate-focused visitors. Keep the presentation clear, match it to your brand, and choose the loan programs that make sense for your audience. When configured well, the Live Rate Widget can help keep borrowers engaged and create more opportunities for follow-up conversations.
Go to Company Settings in LoanOfficer.ai to access the website widget tools.
Open Widget Studio from Company Settings. This is where the rate widget is managed.
Select the rate widget to begin configuring how mortgage rates will appear on your website.
Choose the display format that fits your page, such as stack, pill style, or carousel style.
Select a light or dark theme, update the brand color, and upload your logo if desired.
Customize which loan programs appear in the widget and remove options that are not relevant to your audience.
Change the order of the rate options and update the title, such as using “Today’s Average Rates.”
Decide whether to show the add-a-quote button and whether to display daily rate changes.
The Live Rate Widget is a website tool in LoanOfficer.ai that lets you display mortgage rate information on your loan officer website.
You can find it in Widget Studio under Company Settings.
Yes. You can customize the layout, theme, branding color, and logo so the widget better matches your website.
The transcript shows layout options including stack, pill style, and carousel style.
Yes. You can customize the content and include or exclude specific rate programs, such as showing a 30-year FHA option and removing jumbo rates.
Yes. You can update the title shown on the widget, such as changing it to “Today’s Average Rates.”
Yes. The add-a-quote button can be toggled on or off depending on how you want the widget to function on your website.
Yes. You can toggle the daily change display on or off.
Choose the theme that best matches the page where the widget will appear. Use a light theme on lighter pages and a dark theme on darker website sections.
[00:00] There were a couple of things that I wanted to go over and show you as far as updates that we have done. The first one is that we just released dark mode, so now you can toggle between dark mode and light mode. [00:18] We also just released a new tool under our Widget Studio. It is under Company Settings. If you come here to Widget Studio, we now have our rate widget. [00:36] This is where we are adding additional tools and gadgets into the loan officer’s hands so they can better utilize the platform. If you wanted to pull the Daily Rate Watch rates into your website, for example, you can come in here and customize the layout. [00:54] You can decide how you want that to look. You can go through the different modes, such as stack, pill style, and carousel style. You can also choose different themes, including a dark theme or a light theme. [01:12] You can come in, change the branding color, and upload your logo. Then you can customize the content too. For example, maybe you only want to include the 30-year FHA and you do not want jumbos on your rate stack. [01:30] You can come in here and customize those options. You can also change the order and control how they flow in the layout. If you want to change the title, maybe you want it to say “Today’s Average Rates,” you can update what is showing in the setup. [01:48] You can change the add-a-quote button if you want to toggle that on or off. You can really customize how the setup appears here. You can also toggle the daily change on or off. [02:06] That is the setup for how you can customize your rate widget. Again, that is going to be under Widget Studio inside of Company Settings.