Skip to main content

Revenue Widget Installation

The SendSquared Revenue Estimation Widget allows you to embed an interactive revenue projection calculator directly on your marketing website. This powerful tool helps potential property owners visualize their earning potential with your vacation rental management company.

Overview​

The widget provides:

  • Interactive revenue projections based on property characteristics
  • Customizable styling to match your brand
  • Monthly revenue charts
  • Call-to-action buttons for lead generation
  • Mobile-responsive design

Basic Installation​

Step 1: Add the Script​

Add the following script tag to your website's HTML, preferably in the <head> section:

<script src="https://static.sendsquared.com/images/oa-proforma.bundled.js"></script>

Step 2: Add the Widget Element​

Place the following HTML element where you want the widget to appear:

<!-- SendSquared Revenue Estimation Widget -->
<style>
  :root {
    --oa-primary-color: #0c2340;
    --oa-block-text-color: #ffffff;
    --oa-mobile-slide-height: 50vh;
  }
</style>

<oa-proforma
  position="right"
  sticky="true"
  taxValue="0"
  unitType="house"
  bedrooms="3"
  bathrooms="2"
  accommodates="6"
  locationQuality="5"
  propertyQuality="5"
  viewQuality="5"
  buttonText="Get Your Revenue Estimate"
  buttonUrl="https://your-website.com/contact"
  location="Your Location"
  chartData="[10,12,15,8,7,9,11,13,14,12,10,9]"
></oa-proforma>

Configuration Options​

Important: Tax Value Configuration

The taxValue attribute should be set to your area's average property tax assessment value, not individual property values. This ensures accurate revenue calculations across your market. For example, if the average assessed property value in your area is $985,418, use that value.

Widget Attributes​

AttributeTypeDescriptionExample
positionstringWidget position (left, right)"right"
stickybooleanMake widget sticky on scroll"true"
taxValuenumberProperty tax value"500000"
unitTypestringProperty type"house"
bedroomsnumberNumber of bedrooms"3"
bathroomsnumberNumber of bathrooms"2"
accommodatesnumberMaximum occupancy"6"
locationQualitynumberLocation rating (1-10)"7"
propertyQualitynumberProperty rating (1-10)"8"
viewQualitynumberView rating (1-10)"6"
buttonTextstringCTA button text"Schedule a Call"
buttonUrlstringCTA button link"https://..."
buttonTypestringButton behavior (link)"link"
locationstringProperty location name"Beach Town"
chartDataarrayMonthly revenue data"[10,12,15,...]"

Advanced Attributes​

AttributeTypeDescription
noLoftbooleanExclude loft option
normAccommodatesnumberNormalization factor for occupancy
normBedroomsnumberNormalization factor for bedrooms
normBathroomsnumberNormalization factor for bathrooms
normTaxnumberNormalization factor for tax value
normLocationnumberNormalization factor for location
normPropertynumberNormalization factor for property
normViewnumberNormalization factor for view
weightTaxnumberWeight for tax in calculations
weightInputsnumberWeight for other inputs
textAccommodatesstringCustom tooltip for accommodates
textBathroomsstringCustom tooltip for bathrooms
textLocationstringCustom tooltip for location
textPropertystringCustom tooltip for property
textViewstringCustom tooltip for view

Styling Options​

Customize the widget appearance using CSS variables:

:root {
  --oa-primary-color: #0c2340;        /* Primary brand color */
  --oa-block-text-color: #ffffff;     /* Text color on colored backgrounds */
  --oa-mobile-slide-height: 50vh;     /* Height on mobile devices */
}

Copy-Ready Code​

<!-- SendSquared Revenue Estimation Widget -->
<script src="https://static.sendsquared.com/images/oa-proforma.bundled.js"></script>

<style>
  :root {
    --oa-primary-color: #0c2340;
    --oa-block-text-color: #ffffff;
    --oa-mobile-slide-height: 50vh;
  }
</style>

<oa-proforma
  position="right"
  sticky="true"
  taxValue="0"
  unitType="house"
  bedrooms="3"
  bathrooms="2"
  accommodates="6"
  locationQuality="5"
  propertyQuality="5"
  viewQuality="5"
  buttonText="Get Your Revenue Estimate"
  buttonUrl="https://your-website.com/contact"
  location="Your Location"
  chartData="[10,12,15,8,7,9,11,13,14,12,10,9]"
></oa-proforma>

Widget Playground​

Customize the widget parameters below to generate your personalized code:

Monthly Revenue Data (in thousands)

Generated Code:

<!-- SendSquared Revenue Estimation Widget -->
<script src="https://static.sendsquared.com/images/oa-proforma.bundled.js"></script>

<style>
  :root {
    --oa-primary-color: #0c2340;
    --oa-block-text-color: #ffffff;
    --oa-mobile-slide-height: 50vh;
  }
</style>

<oa-proforma
  position="right"
  sticky="true"
  taxValue="0"
  unitType="house"
  bedrooms="3"
  bathrooms="2"
  accommodates="6"
  locationQuality="5"
  propertyQuality="5"
  viewQuality="5"
  buttonText="Get Your Revenue Estimate"
  buttonUrl="https://your-website.com/contact"
  buttonType="link"
  location="Your Location"
  chartData="[10,12,15,8,7,9,11,13,14,12,10,9]"
></oa-proforma>

Integration Tips​

1. Responsive Design​

The widget is mobile-responsive by default. You can adjust the mobile height using the --oa-mobile-slide-height CSS variable.

2. Lead Capture​

Set the buttonUrl to your contact form or scheduling page to capture leads directly from the widget.

3. Data Accuracy​

For the most accurate revenue projections:

  • Use actual local market data for chartData
  • Set quality ratings based on your property evaluation criteria
  • Configure normalization factors based on your market analysis

4. Brand Consistency​

Match the widget to your brand by customizing:

  • Primary color (--oa-primary-color)
  • Button text and styling
  • Location names and descriptions

Troubleshooting​

Widget Not Appearing​

  1. Ensure the script tag is loaded before the widget element
  2. Check browser console for JavaScript errors
  3. Verify all required attributes are present

Styling Issues​

  1. Make sure CSS variables are defined in :root
  2. Check for conflicting CSS rules on your site
  3. Use browser developer tools to inspect the widget

Data Not Updating​

  1. Verify chartData is a valid JSON array
  2. Check that all numeric values are properly formatted
  3. Ensure no typos in attribute names

Support​

For additional help with widget installation or customization, please contact SendSquared support or refer to the Salesroom Overview documentation.