Appointment Scheduler Widget

Embed an appointment scheduling widget on your website to allow prospects to book appointments with your leasing team

Overview

The Appointment Scheduler widget provides a user-friendly interface for visitors to select available appointment times. When an appointment is scheduled, it is automatically assigned to a leasing professional based on availability and group assignment rules.

Prerequisites

Before embedding the Appointment Scheduler widget, ensure you have:

Funnel Leasing API Key - Your company API key (provided by Funnel Leasing)
Group ID - The ID of the Funnel group that will be used for the widget. This group determines which users' schedules are used to determine availability, and which users are assigned to appointments
Website access - Ability to add script tags to your website's HTML

💡

Contact your Funnel Leasing account representative or support team at support@funnelleasing.com to obtain your API key and Group ID.

Installation

To embed the Appointment Scheduler widget on your website, add the following code to your HTML page where you want the widget to appear:

Installation codeHTML200 · application/json

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript">
  NestioLeadCapture({
    "type": "lead_capture_appointment",
    "key": "FUNNEL_API_KEY_HERE",
    "group": FUNNEL_GROUP_ID_HERE,
    "color": "",
    "location": "",
    onComplete: function() {
      dataLayer.push({'event': 'lead-form-submission'});
    }
  });
</script>

📝

Replace FUNNEL_API_KEY_HERE with your actual API key (as a string) and FUNNEL_GROUP_ID_HERE with your Group ID (as a number without quotes). The type parameter must be set to "lead_capture_appointment" for the appointment scheduler.

Configuration

The Appointment Scheduler widget accepts the following configuration parameters:

Parameter	Type	Required	Default	Description
`key`	string	Yes	—	The company API key provided by Funnel Leasing
`group`	number	Yes	—	The ID of the Funnel group that will be used for the widget. This group determines which users' schedules are used to determine availability, and which users are assigned to appointments
`type`	string	Yes	—	Must be set to "lead_capture_appointment" for the appointment scheduler widget
`containerId`	string	No	—	The ID of the div where you want your widget to appear. If not specified, the widget will create its own container
`color`	string	No	—	The brand color (6-digit hex code) used for submit buttons and header text
`location`	string	No	—	The text used to show the user the location of the appointment. This should typically be the address of the building where the appointment will take place. This will be displayed on the widget and in confirmation emails to both the user and the assigned agent
`campaignInfo`	string	No	—	When not using Funnel's DNI Script, use this parameter to pass a value to Funnel for marketing attribution. The value must match exactly (case sensitive) the campaign name as entered in Funnel under marketing settings. When using the DNI Script, this parameter should not be used as it will overwrite the lead source
`onComplete`	function	No	—	A callback function that executes after the widget form is submitted. Useful for triggering analytics events (e.g., Google Tag Manager)
`submitLabel`	string	No	"Make Appointment"	Label that displays on the submit button on the client info form
`unit`	number	No	—	ID of Funnel Unit that the client will be associated with in Funnel
`buttonTextColor`	string	No	—	Color of the text on the submit button (6-digit hex code)
`textColor`	string	No	—	Color of the headers for each field on the widget (6-digit hex code)

Examples

Basic Appointment Scheduler

A minimal appointment scheduler with only required parameters:

Basic implementationHTML200 · application/json

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript">
  NestioLeadCapture({
    "type": "lead_capture_appointment",
    "key": "your-api-key-here",
    "group": 123
  });
</script>

Customized Appointment Scheduler

An appointment scheduler with custom styling and location:

Customized stylingHTML200 · application/json

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript">
  NestioLeadCapture({
    "type": "lead_capture_appointment",
    "key": "your-api-key-here",
    "group": 123,
    "color": "74FFE7",
    "location": "123 First Street, New York, NY 10001",
    "submitLabel": "Schedule My Tour",
    "buttonTextColor": "FFFFFF",
    "textColor": "333333"
  });
</script>

Appointment Scheduler with Google Tag Manager Integration

An appointment scheduler that triggers a Google Tag Manager event on submission:

Google Tag Manager integrationHTML200 · application/json

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript">
  NestioLeadCapture({
    "type": "lead_capture_appointment",
    "key": "your-api-key-here",
    "group": 123,
    "color": "74FFE7",
    "location": "123 First Street",
    onComplete: function() {
      dataLayer.push({'event': 'lead-form-submission'});
    }
  });
</script>

💡

For detailed instructions on integrating with Google Tag Manager, see the Google Analytics Integration guide.

Appointment Scheduler with Specific Container

An appointment scheduler that targets a specific div on your page:

Custom containerHTML200 · application/json

<div id="my-appointment-widget"></div>

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript">
  NestioLeadCapture({
    "type": "lead_capture_appointment",
    "key": "your-api-key-here",
    "group": 123,
    "containerId": "my-appointment-widget"
  });
</script>

Use the code generator below to create custom widget code with your specific configuration:

Widget Code Generator

API Key*

Group ID*

Container ID

Brand Color (hex)

Location

Campaign Info

OnComplete Event Name

Submit Label

Unit ID

Button Text Color (hex)

Text Color (hex)

Widget Type

See the Appointment Scheduler widget in action:

How It Works

Availability Calculation - The widget queries the schedules of all users in the specified group to determine available appointment times
Time Slot Display - Available time slots are displayed to the visitor in a user-friendly calendar interface
Appointment Booking - When a visitor selects a time slot and submits their information, an appointment is created in Funnel Leasing
Assignment - The appointment is automatically assigned to a leasing professional based on availability and group assignment rules
Confirmation - Both the visitor and the assigned agent receive confirmation emails with the appointment details

Marketing Attribution

The Appointment Scheduler widget supports marketing attribution in two ways:

Using the DNI Script (Recommended) - When using Funnel's Dynamic Number Insertion (DNI) script, marketing attribution is automatically handled. The DNI script captures UTM parameters and referrer information, which is then passed to the appointment scheduler widget.
Using the campaignInfo parameter - When not using the DNI script, you can manually pass campaign information using the campaignInfo parameter. The value must match exactly (case sensitive) the campaign name as entered in Funnel under marketing settings.

⚠️

Do not use both the DNI script and the campaignInfo parameter together. If both are present, the campaignInfo parameter will overwrite the lead source passed by the DNI script.

Troubleshooting

Widget Not Appearing

Check script tags - Ensure both script tags are present and in the correct order
Verify API key - Confirm your API key is correct and wrapped in quotes
Check Group ID - Verify your Group ID is a number (without quotes)
Browser console - Check the browser console for JavaScript errors

No Available Time Slots

Check user schedules - Ensure users in the specified group have availability configured in their schedules
Verify Group ID - Confirm the Group ID is correct and contains users with active schedules
Time zone - Verify that time zones are configured correctly

Appointments Not Being Created

Verify Group ID - Ensure the Group ID exists in your Funnel Leasing account
Check API key - Confirm your API key has the necessary permissions
Network tab - Check the browser's Network tab to see if requests are being sent successfully

Styling Issues

Color format - Ensure color values are 6-digit hex codes (e.g., "74FFE7", not "#74FFE7" or "74FFE7FF")
Container conflicts - If using containerId, ensure the target div exists on the page

Common Errors

Error	Solution
API key is invalid	Contact Funnel Leasing support to verify your API key
Group ID not found	Verify the Group ID exists in your Funnel account
No available appointments	Ensure users in the group have availability configured in their schedules
Widget not loading	Check that the script source URL is accessible and not blocked by ad blockers

Support

If you continue to experience issues after checking the troubleshooting steps above, please contact:

Customer Support: support@funnelleasing.com
Your Account Representative: Reach out to your assigned Funnel Leasing account representative

Appointment Scheduler Widget

Overview

Prerequisites

Installation

Configuration

Examples

Basic Appointment Scheduler

Customized Appointment Scheduler

Appointment Scheduler with Google Tag Manager Integration

Appointment Scheduler with Specific Container

Widget Code Generator

Widget Code Generator

Widget Demo

How It Works

Marketing Attribution

Troubleshooting

Widget Not Appearing

No Available Time Slots

Appointments Not Being Created

Styling Issues

Common Errors

Support