BrokerBuddie Calculator Overview

BrokerBuddie Calculator allow you to create and embed interactive financial calculators on your website. These calculators help visitors understand their financial options while automatically capturing their contact information as leads. Perfect for mortgage brokers, financial advisors, and real estate professionals.

What are the BrokerBuddie Calculators?

Calculators are embeddable financial calculators that you can add to any website with a simple script tag. They provide value to your visitors by helping them calculate borrowing capacity, loan repayments, stamp duty, and more, while simultaneously capturing their contact information as qualified leads.

Key Benefits
Lead Generation

Automatically capture qualified leads when visitors use your calculators

Easy Installation

One-line script tag installation - works on any website

Fully Customizable

Match your brand colors, logos, and messaging

Analytics & Tracking

Track widget views, interactions, and lead conversions

CRM Integration

Automatically send leads to your CRM, webhook, or email

Mobile Responsive

Works perfectly on desktop, tablet, and mobile devices

Getting Started

Creating and installing your first calculator widget is quick and easy. Follow these steps to get started:

Step-by-Step Setup
1. Access Dashboard

Log in to your account and navigate to "My Calculators" at `/dashboard/widgets/my-widgets`

2. Create Calculator

Click "Create New Calculator" and select the calculator type you want to create

3. Configure Settings

Customize your calculator name, form headline, button label, and colors

4. Set Up Lead Capture

Configure email notifications, webhooks, or CRM integration for lead delivery

5. Get Install Code

Click "Install" on your calculator to get the embed code

6. Embed on Website

Copy and paste the embed code into your website HTML

Available Calculator Types

Quickli Widgets offers five powerful financial calculators designed for mortgage brokers and financial professionals:

1. Borrowing Capacity

Calculate how much someone can borrow based on their income, expenses, and deposit. Perfect for helping clients understand their maximum loan amount.

2. Refinance Feasibility

Compare current loan terms with potential new loan terms to determine if refinancing makes financial sense. Shows potential savings and break-even points.

3. Loan Repayment

Calculate monthly loan payments, total interest paid, and repayment schedules. Supports principal & interest and interest-only loans.

4. Stamp Duty

Calculate property transfer duty (stamp duty) based on property value and location. Supports all Australian states and territories with accurate rates.

5. Purchasing Power

Determine maximum property price based on available deposit and borrowing capacity. Helps clients understand what they can afford to buy.

Creating a Calculator

Creating a new calculator widget involves configuring several settings to match your brand and capture leads effectively.

Basic Information
  • Calculator Name: Give your calculator a descriptive name (e.g., "Home Loan Borrowing Capacity Calculator"). This name appears in your dashboard and analytics.
  • Calculator Type: Select from the five available calculator types (Borrowing Capacity, Refinance Feasibility, Loan Repayment, Stamp Duty, or Purchasing Power).
Form Customization
  • Form Headline: The main headline displayed on your widget form (e.g., "Get Your Results" or "Calculate Your Borrowing Power").
  • Form Subtext: Optional additional text to provide context or instructions to users.
  • Button Label: Text displayed on the submit button (e.g., "Book an Appointment", "Get My Results", "Contact Me").
  • Success Message: Message shown to users after they successfully submit the form (e.g., "Thank you! We will be in touch soon.").
Email Template Configuration

Configure email notifications that are sent when leads are captured:

  • Email Subject: Subject line for lead notification emails. You can use placeholders like {widget_name} and {widget_id}.
  • Email Body: Customize the email content with placeholders for dynamic information like lead name, email, calculator results, etc.
  • Recipient Email: Email address(es) where lead notifications will be sent.
Tip: Use clear, compelling headlines and button labels to encourage form submissions. Test different messages to see what works best for your audience.

Customization Options

Make your calculator widgets match your brand identity with comprehensive customization options.

Color Customization
Primary Color

Main brand color used for buttons, headers, and primary elements (default: #3B82F6)

Accent Color

Secondary color for highlights and accents (default: #1E40AF)

Text Color

Color for text elements throughout the widget (default: #1F2937)

Widget Name Color

Color for the calculator name/title display (default: #FFFFFF)

Branding Options
  • Logo URL: Add your company logo by providing a publicly accessible image URL. The logo will appear in the widget header.
  • Button Radius: Control the corner roundness of buttons (0px = square, higher values = more rounded).
  • Privacy Policy URL: Link to your privacy policy that will be displayed in the widget form.
Calculator Defaults

Some calculators allow you to set default values that pre-fill the calculator fields:

  • Default Loan Amount: Pre-filled loan amount (for Loan Repayment calculator)
  • Default Interest Rate: Pre-filled interest rate percentage
  • Default Loan Term: Pre-filled loan term in years
Pro Tip: Use your brand colors consistently across all calculators to create a cohesive experience. Test your color combinations to ensure good contrast and readability.

Installation & Embedding

Installing your calculator widget on any website is simple - just copy and paste a single script tag.

Getting Your Install Code
  1. Go to your calculator's detail page in the dashboard
  2. Click the "Install" button or tab
  3. Copy the provided HTML code snippet
Installation Code Format

The installation code looks like this:

<script src="https://yourdomain.com/widgets/v1.js?t=1234567890" data-bb-widget-id="WID_XXXXXXXXXX" data-bb-token="your_api_token_here" async></script>
Where to Place the Code

You can place the script tag in several locations:

  • In the <head> section: Place it before the closing </head> tag
  • Before </body> tag: Place it just before the closing </body> tag (recommended for better page load performance)
  • In a specific page section: Place it where you want the calculator to appear (the widget will render in that location)
Complete HTML Example
<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1>Calculate Your Borrowing Capacity</h1> <!-- Calculator Widget --> <script src="https://yourdomain.com/widgets/v1.js?t=1234567890" data-bb-widget-id="WID_XXXXXXXXXX" data-bb-token="your_api_token_here" async></script> </body> </html>
Alternative: Web Component Method

For more control over placement, you can use the Web Component method:

  1. Load the Web Component script:
    2. <script src="https://yourdomain.com/widgets/calculator-wc.js"></script>
  2. Use the custom element where you want the calculator:
    3. <bb-calculator widget-id="WID_XXXXXXXXXX" token="your_api_token_here" app-url="https://yourdomain.com"> </bb-calculator>
Security Note: Keep your API token secure. While it needs to be in the HTML for the widget to work, ensure your widget's domain whitelist includes only the domains where you'll embed it. Never share your API token publicly.
Testing Your Installation
  1. After adding the code to your website, refresh the page
  2. The calculator should appear where you placed the script tag
  3. Test the calculator by entering values and submitting the form
  4. Check your dashboard to verify the lead was captured

Lead Management

All leads captured by your calculator widgets are automatically stored in your dashboard and can be delivered to multiple destinations.

Viewing Leads

Access all your leads at: /dashboard/widgets/my-leads

Each lead includes:

  • Contact Information: Name, email, phone number
  • Calculator Data: All values entered in the calculator
  • Calculation Results: The results generated by the calculator
  • Submission Details: Date, time, IP address, and widget information
Lead Delivery Options
Email Notifications

Receive instant email notifications when leads are captured. Configure custom email templates with placeholders.

Webhook Integration

Send leads to custom webhook endpoints for integration with your CRM, marketing automation, or other systems.

CRM Integration

Automatically create leads in your CRM system (Salesforce, HubSpot, etc.) when calculators are submitted.

Lead Management Features
  • Filter & Search: Filter leads by calculator type, widget, date range, or status. Search by name, email, or phone.
  • Export Leads: Export all leads or filtered results to CSV for use in spreadsheets or other tools.
  • Mark as Delivered: Track which leads you've processed by marking them as delivered.
  • Lead Status: Organize leads with status labels (New, Contacted, Qualified, etc.).
  • Delete Leads: Remove leads you no longer need from your system.

Analytics & Performance Tracking

Track your calculator widgets' performance with comprehensive analytics and reporting.

Key Metrics
Widget Views

Track how many times your calculators have been viewed or loaded on websites

Form Submissions

Count of completed calculator forms and lead submissions

Conversion Rate

Percentage of views that result in form submissions (leads)

Total Leads

Total number of leads captured across all your calculators

Analytics Dashboard

Access your analytics at: /dashboard/widgets/my-analytics

The analytics dashboard shows:

  • Overview Statistics: Total widgets, total leads, leads today, widget views
  • Performance Trends: Charts showing widget performance over time
  • Calculator Breakdown: Performance metrics for each individual calculator
  • Activity Timeline: Recent widget activity and interactions
Tip: Regularly review your analytics to identify which calculators perform best and optimize underperforming ones. A/B test different headlines, button labels, and colors to improve conversion rates.

Best Practices

Widget Placement
  • Relevant Pages: Place calculators on relevant pages (e.g., borrowing capacity calculator on mortgage/home loan pages)
  • Above the Fold: Position calculators where they're immediately visible without scrolling
  • Multiple Locations: Consider placing calculators on multiple pages to maximize exposure
  • Mobile Optimization: Ensure calculators are visible and functional on mobile devices
Content & Messaging
  • Clear Value Proposition: Use headlines that clearly communicate the benefit (e.g., "Find Out How Much You Can Borrow")
  • Simple Forms: Keep forms simple and easy to complete - only ask for essential information
  • Compelling CTAs: Use action-oriented button labels (e.g., "Get My Results", "Book a Consultation")
  • Trust Signals: Include privacy policy links and reassure users about data security
Lead Quality Optimization
  • Follow Up Quickly: Respond to leads within 24 hours for best conversion rates
  • Personalize Responses: Reference the calculator results in your follow-up communications
  • Track Lead Sources: Use analytics to identify which calculators generate the best leads
  • Test & Iterate: A/B test different configurations to improve performance
Performance Optimization
  • Monitor Analytics: Regularly check your analytics dashboard to track performance
  • Update Content: Refresh headlines and messaging based on performance data
  • Optimize Colors: Ensure good contrast and readability with your chosen colors
  • Test Across Devices: Verify calculators work correctly on desktop, tablet, and mobile
Pro Tip: Create multiple calculators for different purposes and test which ones generate the most leads. Use the analytics to identify trends and optimize your lead generation strategy.

Troubleshooting

Common Issues
  • Widget Not Appearing:
    • Verify the embed code is correctly placed in your HTML
    • Check that the script tag includes the async attribute
    • Ensure your website allows external scripts (check Content Security Policy)
    • Check browser console for JavaScript errors
    • Verify the widget ID and API token are correct
  • No Leads Coming Through:
    • Verify the widget is active in your dashboard
    • Check that lead delivery settings are configured (email, webhook, or CRM)
    • Test the calculator form submission to ensure it works
    • Check your spam folder for email notifications
  • Styling Issues:
    • Check your website's CSS for conflicts with widget styles
    • Verify color settings in your calculator configuration
    • Test on different browsers to identify browser-specific issues
    • Ensure your website doesn't override widget styles with !important rules
  • Calculator Not Calculating:
    • Check browser console for JavaScript errors
    • Verify all required fields are filled correctly
    • Ensure the calculator script loaded successfully
    • Try refreshing the page or clearing browser cache
  • Leads Not Delivered:
    • Check webhook URL is correct and accessible
    • Verify email addresses are correct in notification settings
    • Check CRM integration credentials and settings
    • Review delivery logs in your dashboard for error messages
Getting Help

If you encounter issues with your calculator widgets:

  • Check the analytics to see if widgets are being viewed
  • Verify your embed code is correctly implemented
  • Ensure your website allows external scripts
  • Review browser console for error messages
  • Test on different browsers and devices
  • Contact support at support@brokerbuddie.ai for assistance
Support: Our support team is available to help you get the most out of Quickli Calculator Widgets. If you're experiencing persistent issues, don't hesitate to reach out with details about the problem and any error messages you've encountered.
Frequently Asked Questions
  • Can I use multiple calculators on the same page? Yes, you can embed multiple calculators on the same page by adding multiple script tags with different widget IDs.
  • Do calculators work on mobile devices? Yes, all calculators are fully responsive and work on desktop, tablet, and mobile devices.
  • Can I customize the calculator appearance? Yes, you can customize colors, logos, button styles, and messaging through the calculator configuration.
  • How do I update a calculator after it's installed? Changes to calculator settings (colors, text, etc.) are automatically reflected on all websites where the calculator is embedded. No need to update the embed code.
  • Are there any usage limits? Check your plan details for information about widget limits, lead limits, and API rate limits.
  • Can I export my leads? Yes, you can export all leads or filtered results to CSV format from the leads dashboard.
  • How secure is the lead data? All lead data is encrypted and stored securely. API tokens are required for widget access, and rate limiting prevents abuse.