Example Sales Room Page Documentation
This document provides a complete example of a sales room page template using Pug, along with explanations of its key components and configuration.
Technical Reference
For comprehensive technical documentation on building custom sales room templates, including security best practices, image handling, and advanced features, see the Custom Template Development Guide.
Download Resources
Template File
You can download the complete Pug template file here: example-sales-room.pug
Required CSS Files
The template requires this CSS file from SendSquared's CDN:
- app.css - Base application styles
You can either link to this file directly from the CDN (recommended) or download it for local hosting.
The template includes custom inline styles for font families and additional styling.
Complete Example File
//- ============================================
//- SALES ROOM TEMPLATE - Example Implementation
//- ============================================
//- This template creates a personalized sales room page for vacation rental properties
//- It includes a property map, earnings calculator, and lead capture form
//-
//- IMPORTANT: DATA PROVIDED BY SENDSQUARED
//- The following data objects are automatically provided by SendSquared:
//- - contact object: Contains visitor information (first_name, last_name, primary_email, mobile_phone)
//- - unit object: Contains property details (address_1, address_2, locality, region, postal, lat, lng, taxable_value, proforma_value_low, proforma_value_high)
//- You DO NOT need to define or provide these objects - they are injected by SendSquared
//- ============================================
doctype html
head
//- Page title dynamically includes contact name for personalization
title #{contact.first_name} #{contact.last_name} - Example Vacation Rentals
//- Essential meta tags for proper rendering across devices
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
//- External CSS resources from CDN
//- Base application styles from SendSquared
link(href='https://static.sendsquared.com/images/std-landing/app.css' rel='stylesheet')
//- Google Fonts preconnect for performance optimization
link(rel='preconnect' href='https://fonts.googleapis.com')
link(rel='preconnect' href='https://fonts.gstatic.com' crossorigin='')
//- Import Dancing Script and Nunito fonts for design consistency
link(href='https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap' rel='stylesheet')
//- Custom styles for sales room, modal and form components
style.
/* Custom styles for this sales room */
body {
font-family: "Nunito", sans-serif;
}
h1, h2, h3 {
font-family: "Dancing Script", cursive;
}
/* Schedule link button styling */
.schedule-link {
display: inline-block;
padding: 0.5em;
margin: 0 auto;
text-align: center;
background: #0c2340;
color: white;
text-decoration: none;
}
/* Modal overlay styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4); /* Semi-transparent backdrop */
}
/* Modal content container */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
}
/* Modal close button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
/* Close button hover states */
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Form layout styling */
form {
display: flex;
flex-direction: column;
}
/* Form element spacing */
label, input, button {
margin-top: 10px;
}
//- Load the OA Proforma widget script
//- This powers the interactive earnings calculator
script(type='module' src='https://static.sendsquared.com/images/std-landing/oa-proforma.bundled.js')
//- ============================================
//- HEADER NAVIGATION
//- ============================================
header.sticky.top-0(style="z-index:5")
nav.bg-white.border-gray-200.px-4(class='lg:px-6 py-2.5 dark:bg-gray-800')
.flex.flex-wrap.justify-between.items-center.mx-auto.max-w-screen-xl
//- Company logo and home link
a.flex.items-center(href='/')
img.mr-3.h-16(src='#{CDN}/company-logo.webp' alt='Example Vacation Rentals')
//- Mobile menu toggle button (hidden on desktop)
.flex.items-center(class='lg:order-2')
button.inline-flex.items-center.p-2.ml-1.text-sm.text-primary.rounded-lg(data-collapse-toggle='mobile-menu-2' type='button' class='lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600' aria-controls='mobile-menu-2' aria-expanded='false')
span.sr-only Open main menu
//- Hamburger menu icon
svg.w-6.h-6(fill='currentColor' viewbox='0 0 20 20' xmlns='http://www.w3.org/2000/svg')
path(fill-rule='evenodd' d='M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd')
//- Close icon (hidden by default)
svg.hidden.w-6.h-6(fill='currentColor' viewbox='0 0 20 20' xmlns='http://www.w3.org/2000/svg')
path(fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd')
//- Mobile menu container
#mobile-menu-2.hidden.justify-between.items-center.w-full(class='lg:flex lg:w-auto lg:order-1')
//- ============================================
//- ALTERNATIVE HERO SECTION (COMMENTED OUT)
//- ============================================
//- This section shows an alternative layout with hero image background
//- Uncomment to use a full-width hero section with overlay text
//- section.padre-hero-2.bg-center.bg-cover.py-6(style="background-image: url(" + basePath + hero + ")")
//- p.p-6.text-lg.text-white
//- | Welcome
//- span.font-bold #{contact.last_name} #{contact.first_name},
//- | try out our earnings widget below to see how you can maximize your property’s earnings, and let your vacation home be cared for by the best property management team.
//- .grid.max-w-screen-xl.mx-auto.grid-cols-12.gap-6.px-6.items-center(class='sm:gap-8')
//- .col-span-5.place-self-end
//- #map.w-40.h-40.object-cover.object-center
//- //- Put map here
//- .col-span-7
//- p.text-white
//- | #{contact.last_name} #{contact.first_name}
//- br
//- | #{unit.address_1}
//- if unit.address_2
//- br
//- | #{unit.address_2}
//- br
//- | #{unit.locality}, #{unit.region}
//- br
//- | #{unit.postal}
//- .pt-4.text-center
//- a.transition.ease-in-out.inline-block(href='#calc' onclick="document.getElementById('calc').scrollIntoView({ behavior: 'smooth' });return false;" class='hover:translate-y-2')
//- svg.w-10.h-10.text-white.mx-auto.rounded-full.round.border-2.p-2(aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewbox='0 0 14 8')
//- path(stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 5.326 5.7a.909.909 0 0 0 1.348 0L13 1')
//- ============================================
//- PROPERTY MAP SECTION
//- ============================================
//- Interactive Google Maps showing property location
section.bg-center.bg-cover(style="")
//- Map container - will be populated by JavaScript
#map.object-cover.object-center(style="height:300px;")
//- ============================================
//- WELCOME MESSAGE SECTION
//- ============================================
section.bg-center.bg-cover.py-6
p.p-6.text-lg
| Welcome
//- Personalized greeting with contact name
span.font-bold #{contact.last_name} #{contact.first_name},
| try out our earnings widget below to see how you can maximize your property’s earnings, and let your vacation home be cared for by the best property management team.
//- ============================================
//- EARNINGS CALCULATOR SECTION
//- ============================================
section#calc.p-0(class='md:p-6')
//- Alternative revenue display (commented out)
//- Uncomment these lines to show static revenue estimates above the calculator
//- h4(style="padding: 0.5em; margin: 0 auto; text-align:center;")
//- b Estimated Annual Gross Revenue
//- h2(style="padding: 0.5em; margin: 0 auto; text-align:center; background: #0c2340; color: white;")
//- if unit.proforma_value_low && unit.proforma_value_high
//- | #{(unit.proforma_value_low / 100).toLocaleString('en-US', {style: 'currency', currency: 'USD'})} - #{(unit.proforma_value_high / 100).toLocaleString('en-US', {style: 'currency', currency: 'USD'})}
//- else
//- | Proforma not yet set
//- p(style="padding: 0.5em; margin: 0 auto; text-align:center;") per year
//- p(style="padding: 0.5em; margin: 0 auto; text-align:center;") The estimated gross booking revenue (GBR) shown is for rental properties in your area.
//- p(style="margin: 0 auto; text-align:center;")
//- a.schedule-link(id="scheduleLink" style="padding: 0.5em; margin: 0 auto; text-align:center; background: #0c2340; color: white;" href="#") Click here to schedule a video or phone call for your personalized revenue estimate
//- p
//- i *All numbers are proforma's and are not a official quote.
//- CSS variables for OA Proforma widget theming
style.
:root {
--oa-primary-color: #0c2340; /* Primary brand color */
--oa-block-text-color: #ffffff; /* Text color on colored backgrounds */
--oa-mobile-slide-height: 50vh; /* Height of mobile slider */
}
//- OA Proforma Interactive Calculator Widget
//- This is the main earnings estimation tool
//-
//- Widget Attributes:
//- position: Widget position on desktop ('right' or 'left')
//- sticky: Enable sticky positioning for scrolling
//- taxValue: Property tax value from unit data
//- unitType: Type of property (house, condo, etc.)
//- bedrooms: Number of bedrooms
//- bathrooms: Number of bathrooms
//- accommodates: Guest capacity
//- locationQuality: Location score (1-10)
//- propertyQuality: Property condition score (1-10)
//- viewQuality: View quality score (1-10)
//- noLoft: Whether property has loft space
//- buttonText: CTA button text
//- buttonUrl: URL or JavaScript action for button
//- buttonType: Button behavior type
//- normAccommodates: Normalization factor for accommodates
//- normBedrooms: Normalization factor for bedrooms
//- normBathrooms: Normalization factor for bathrooms
//- normTax: Normalization factor for tax value
//- normLocation: Normalization factor for location
//- normProperty: Normalization factor for property
//- normView: Normalization factor for view
//- weightTax: Weight for tax in calculations
//- weightInputs: Weight for input factors
//- location: Display location name
//- chartData: Array of 12 monthly revenue distribution percentages
//- capLow: Low estimate cap (in cents)
//- capHigh: High estimate cap (in cents)
//- textAccommodates: Explanation for accommodates factor
//- textBathrooms: Explanation for bathrooms factor
//- textLocation: Explanation for location factor
//- textProperty: Explanation for property quality factor
//- textView: Explanation for view quality factor
oa-proforma(
position='right'
sticky='true'
taxValue=unit.taxable_value
unitType="house"
bedrooms='2'
bathrooms='2'
accommodates='2'
locationQuality="7"
propertyQuality="7"
viewQuality="5"
noLoft="true"
buttonText='Click here to schedule a video or phone call for your personalized revenue estimate'
buttonUrl='javascript:showOverlay()'
buttonType="overlay"
normAccommodates="3"
normBedrooms="9"
normBathrooms="1"
normTax="8.9"
normLocation="4"
normProperty="7"
normView="5"
weightTax="0.4"
weightInputs="0.6"
location='Example Beach Location'
chartData='[9.85,10.81,10.68,6.69,6.37,12.87,13.00,6.95,5.86,4.95,6.63,5.34]'
capLow=unit.proforma_value_low
capHigh=unit.proforma_value_high
textAccommodates="The capacity to accommodate more people in a vacation rental can elevate gross rental income by attracting larger groups, enabling higher rates, and increasing occupancy through broader market appeal. Local regulations may restrict property occupancy."
textBathrooms="The number of bathrooms in a vacation rental can influence its gross rental income by enhancing guest convenience."
textLocation="Specific locations in our area are considered at a premium. Waterfront locations are prime, but other locations are also desirable, such as distance to the beach, desirable neighborhoods, near a marina or close to shopping and restaurants. These are all factors taken into consideration. Exceptional location amplifies gross earning potential."
textProperty="Property Quality is reflected directly by both interior and exterior of a property. The interior of the property itself is prime; are the furnishings and inventory adequate, does it reflect current decorating trends, are the kitchen and bathrooms updated? The exterior may also boast amenities that increase appeal such as pool, tennis courts, fitness center, or hot tub. Property Quality directly correlates to earning premium rental rates."
textView="View quality for a vacation rental refers to the appeal and attractiveness of the scenery visible from the property such as water view, mountain view, marina or ocean view. View Quality directly correlates to enhanced gross earning potential."
)
//- ============================================
//- CALL-TO-ACTION SECTION
//- ============================================
section.bg-padre-orange
//- Large CTA button linking to company information
a.text-white.flex.items-center.justify-center.py-6.px-8.text-xl.my-6(href="https://join.example-company.com/") About Example Vacation Rentals
//- ============================================
//- LEAD CAPTURE MODAL
//- ============================================
//- Hidden modal that appears when user clicks schedule button
#myModal.modal
.modal-content
//- Close button
span.close ×
h2 Schedule a Call
//- Lead capture form
form#scheduleForm
//- Form fields with pre-populated values from contact data
label(for='firstName') First Name:
input#firstName(type='text' name='firstName' value=contact.last_name required='')
label(for='lastName') Last Name:
input#lastName(type='text' name='lastName' value=contact.first_name required='')
label(for='email') Email Address:
input#email(type='email' name='email' value=contact.primary_email required='')
label(for='phone') Phone Number:
input#phone(type='tel' name='phone' value=contact.mobile_phone required='')
button(type='submit') Make Inquiry
//- ============================================
//- EXTERNAL SCRIPTS
//- ============================================
//- Flowbite for UI components (mobile menu functionality)
script(src='https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js')
//- Google Maps API - IMPORTANT: Replace YOUR_GOOGLE_MAPS_API_KEY with actual API key
script(src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY")
//- ============================================
//- CUSTOM JAVASCRIPT
//- ============================================
//- Keep this at the very end to ensure DOM is loaded
script.
// Initialize the map when page loads
function initMap() {
// Get property coordinates from server data
const lat = #{unit.lat};
const lng = #{unit.lng};
const address = "#{unit.address_1}, #{unit.locality}, #{unit.region} #{unit.postal}";
// If coordinates are not provided, geocode the address
if (!lat || !lng ) {
geocodeAddress(address);
} else {
createMap(lat, lng);
}
}
// Create the Google Map with property marker
function createMap(lat, lng) {
const location = {lat: lat, lng: lng};
// Initialize map centered on property
const map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 18, // Close zoom for property detail
mapTypeId: google.maps.MapTypeId.SATELLITE // Satellite view for better context
});
// Add marker at property location
new google.maps.Marker({
map: map,
position: location,
title: "#{unit.address_1}, #{unit.address_2} #{unit.locality}, #{unit.region} #{unit.postal}"
});
}
// Geocode address if coordinates not available
function geocodeAddress(address) {
const geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
const location = results[0].geometry.location;
createMap(location.lat(), location.lng());
} else {
console.error('Geocode was not successful for the following reason: ' + status);
}
});
}
// Show overlay function (currently not implemented)
function showOverlay() {
// This function is called by the OA Proforma widget
// but the overlay element doesn't exist in this template
document.getElementById('overlay').style.display = 'flex';
}
// Initialize map on page load
initMap();
//- Modal functionality script
script.
// Get modal elements
const modal = document.getElementById("myModal");
const link = document.getElementById("scheduleLink");
const span = document.getElementsByClassName("close")[0];
const form = document.getElementById("scheduleForm");
// Open modal when schedule link is clicked
link.onclick = function(e) {
e.preventDefault();
modal.style.display = "block";
}
// Close modal when X is clicked
span.onclick = function() {
modal.style.display = "none";
}
// Close modal when clicking outside of it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Handle form submission with SendSquared Lead With Contact API
form.onsubmit = function(e) {
e.preventDefault();
// Collect form data
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
console.log('Form submitted:', data);
// Prepare data for SendSquared Lead With Contact API
// This creates both a contact record and a lead record in a single API call
const leadWithContactData = {
// Contact information
contact: {
first_name: data.firstName,
last_name: data.lastName,
email: data.email,
phone: data.phone
},
// Lead information
lead: {
lead_type_id: 116, // Customize based on your lead types
lead_status_id: 504, // Customize based on your lead statuses
subject: 'Sales Room Inquiry - #{unit.address_1}',
interest_start_at: new Date().toISOString(),
interest_end_at: new Date().toISOString(),
quantity_1: 1, // Adults
quantity_2: 0, // Children
notes: [
'Property Interest: #{unit.address_1}, #{unit.locality}, #{unit.region}',
'Source: Sales Room Page',
'Estimated Revenue: $#{(unit.proforma_value_low / 100).toLocaleString()} - $#{(unit.proforma_value_high / 100).toLocaleString()}'
],
user_id: 1446, // TODO: Replace with your agent ID
source_id: 123, // TODO: Replace with your website source ID
// Link to the specific unit
unit_id: #{unit.id || 'null'}
}
};
// TODO: Send data to your server endpoint that connects to SendSquared API
// Your server should handle the API authentication and forward this request
// to SendSquared's Lead With Contact endpoint
/*
fetch('/api/sendsquared/lead-with-contact', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(leadWithContactData)
})
.then(response => response.json())
.then(result => {
console.log('Lead created successfully:', result);
alert('Thank you for your inquiry! We will contact you soon.');
})
.catch(error => {
console.error('Error creating lead:', error);
alert('There was an error submitting your request. Please try again.');
});
*/
// For now, just log the data (remove this when implementing the API call)
console.log('Lead With Contact Data:', leadWithContactData);
alert('Thank you for your inquiry! (Note: API integration needed)');
// Close modal and reset form
modal.style.display = "none";
form.reset();
}
Key Components Explained
1. CDN Assets
The template uses CDN-hosted assets from https://static.sendsquared.com/images/std-landing/:
- CSS file:
app.css(base application styles) - JavaScript:
oa-proforma.bundled.js - Images:
company-logo.webp
Additional custom styles are included inline in the template.
2. Dynamic Data Integration (SendSquared Provided)
The template uses Pug variables to inject dynamic data that is automatically provided by SendSquared:
Contact Data (from SendSquared):
#{contact.first_name},#{contact.last_name}: Visitor's name#{contact.primary_email}: Visitor's email address#{contact.mobile_phone}: Visitor's phone number
Property Data (from SendSquared):
#{unit.address_1},#{unit.address_2}: Street address#{unit.locality},#{unit.region},#{unit.postal}: City, state, ZIP#{unit.lat},#{unit.lng}: GPS coordinates for mappingunit.taxable_value: Property tax assessment valueunit.proforma_value_low,unit.proforma_value_high: Revenue estimates
You don't need to worry about providing this data - SendSquared handles it automatically.
3. OA-Proforma Widget
The earnings calculator widget (oa-proforma) is the centerpiece with these key attributes:
- position: Widget placement ('right' sticky)
- Property details: bedrooms, bathrooms, accommodates
- Quality scores: locationQuality, propertyQuality, viewQuality (1-10 scale)
- Normalization factors: Used for revenue calculations
- chartData: Monthly revenue distribution data
- Text descriptions: Explanatory text for each factor
Widget Attributes Explained:
taxValue: The property's tax assessment valueunitType: Type of property (house, condo, etc.)bedrooms,bathrooms,accommodates: Property specificationslocationQuality: Score 1-10 for how desirable the location ispropertyQuality: Score 1-10 for property condition and amenitiesviewQuality: Score 1-10 for the quality of views from propertynormAccommodates,normBedrooms, etc.: Normalization factors for calculationsweightTax,weightInputs: Weighting factors for the algorithmchartData: Array of 12 numbers representing monthly revenue distribution percentagescapLow,capHigh: Minimum and maximum revenue caps
4. Google Maps Integration
The template includes an interactive map showing the property location:
- Automatically geocodes addresses if coordinates aren't provided
- Uses satellite view for better property visualization
- Requires a Google Maps API key (replace
YOUR_GOOGLE_MAPS_API_KEY) - Shows a marker at the exact property location
5. Contact Form Modal
A modal popup collects lead information with fields for:
- First and Last Name (pre-populated with contact data)
- Email Address (pre-populated)
- Phone Number (pre-populated)
- All fields are required for form submission
6. Styling
The template uses:
- Tailwind CSS classes for responsive design
- Custom CSS for modal and form styling
- CSS variables for theming the proforma widget
- Mobile-responsive design with hamburger menu
7. Alternative Layouts
The template includes commented-out sections for alternative layouts:
- Hero section with background image
- Static revenue display above calculator
- Additional property details in hero section
Required Data Structure (Provided by SendSquared)
IMPORTANT: The following data objects are automatically provided by SendSquared when the template is rendered. You DO NOT need to define or provide these objects - they are injected by the SendSquared platform based on the visitor and property information.
Contact Object (Provided by SendSquared)
Contains visitor/lead information:
contact = {
first_name: "John", // Visitor's first name
last_name: "Doe", // Visitor's last name
primary_email: "john.doe@example.com", // Visitor's email
mobile_phone: "555-0123" // Visitor's phone number
}
Unit Object (Provided by SendSquared)
Contains property details:
unit = {
id: 456, // Unique property ID in SendSquared
address_1: "123 Beach Road", // Primary address line
address_2: "Suite 100", // Secondary address (optional)
locality: "Beach City", // City
region: "FL", // State/Province
postal: "12345", // ZIP/Postal code
lat: 30.1234, // Latitude (optional, will geocode if missing)
lng: -81.5678, // Longitude (optional, will geocode if missing)
taxable_value: 500000, // Property tax assessment value
proforma_value_low: 5000000, // Low revenue estimate (in cents)
proforma_value_high: 7500000 // High revenue estimate (in cents)
}
All references to #{contact.*} and #{unit.*} in the template will be automatically replaced with actual data by SendSquared when the page is rendered.
Customization Tips
- Update the color scheme by modifying CSS variables in the
:rootselector - Replace
Example Vacation Rentalswith your company name throughout the template - Update the company logo URL to point to your actual logo file
- Modify the proforma widget parameters to match your market
- Customize the explanatory text for each quality factor
- Add your Google Maps API key for map functionality
- Update the
https://join.example-company.com/link to your actual company URL - Adjust the widget normalization and weighting factors based on your market data
- Customize the monthly revenue distribution in
chartData - Implement the form submission endpoint to capture leads
SendSquared Lead With Contact API Integration
The form submission is configured to work with SendSquared's Lead With Contact API, which creates both a contact record and a lead record in a single API call. This is useful for:
- Capturing new leads from your sales room pages
- Tracking interest in specific properties
- Automating the lead capture process
Key Lead Data Fields
The template prepares the following data structure for the API:
{
contact: {
first_name: "John",
last_name: "Doe",
email: "john@example.com",
phone: "555-0123"
},
lead: {
lead_type_id: 116, // Your lead type ID
lead_status_id: 504, // Your lead status ID
subject: "Sales Room Inquiry - 123 Beach Road",
interest_start_at: "2024-01-15T10:30:00Z",
interest_end_at: "2024-01-15T10:30:00Z",
quantity_1: 1, // Adults
quantity_2: 0, // Children
notes: [
"Property Interest: 123 Beach Road, Beach City, FL",
"Source: Sales Room Page",
"Estimated Revenue: $50,000 - $75,000"
],
user_id: 1446, // Assigned agent ID
source_id: 123, // Website source ID
unit_id: 456 // Property unit ID
}
}
Implementation Requirements
-
Server-side Endpoint: You'll need to create a server endpoint that:
- Receives the form data
- Authenticates with SendSquared API
- Forwards the request to SendSquared's Lead With Contact endpoint
- Handles the response
-
Update IDs: Replace these placeholder values with your actual SendSquared configuration:
lead_type_id: Your specific lead type IDlead_status_id: Your specific lead status IDuser_id: The ID of the agent who will handle leadssource_id: Your website source ID in SendSquared
-
Security: Never expose your SendSquared API credentials in client-side code. Always use a server-side proxy.
Implementation Notes
- The template is mobile-responsive with a collapsible navigation menu
- The form integrates with SendSquared's Lead With Contact API
- The
showOverlay()function references a non-existent overlay element - implement if needed - Consider adding Google Analytics or other tracking codes
- Test thoroughly with different property data scenarios
- Ensure GDPR/privacy compliance for lead capture forms
- The API integration requires a server-side endpoint to handle authentication