Interactive Widget Demo

Loading widget...

1. Auto Mode (Recommended)

In auto mode, the widget calls the status endpoint to detect whether the listing is claimed by an agent with availability. If so, it renders the time slot picker for instant booking. Otherwise, it falls back to the request form for AI-coordinated scheduling.

This is the default behavior when no mode is specified, or when mode: 'auto' is set.

Showingly.init(({

apiKey: 'pk_live_abc123',

listingId: 'listing-uuid-or-mls-id',

mode: 'auto', // auto-detects schedule vs request

primaryColor: '#5DBD77',

position: 'bottom-right'

});

</script>

Look at the bottom-right corner of this page to see the floating widget button.

2. Schedule Mode (Time Slot Picker)

Force the widget into schedule mode to always show the time slot picker. The widget fetches real availability from the listing agent's calendar and displays selectable slots for the next 7 days.

Best for listings where the agent has set up their availability schedule.

Showingly.init(({

apiKey: 'pk_live_abc123',

listingId: 'listing-uuid',

mode: 'schedule', // always show time slot picker

primaryColor: '#2563eb'

});

</script>

123 Main Street

Denver, CO 80202

3 bed / 2 bath / 1,850 sq ft

$1,250,000

How Schedule Mode Works

1. Widget calls /api/v1/widget/availability
2. Displays next 7 days as date buttons
3. Shows available time slots for the selected day
4. Collects buyer contact info
5. Submits booking via /api/v1/widget/book
6. Agent receives email notification

3. Request Mode (AI Coordination)

Use request mode for unclaimed listings or when you want the showing to be coordinated by Showingly. The consumer submits their preferred dates and contact info, and we handle the rest.

This is the fallback mode for listings not yet claimed by an agent on Showingly.

Showingly.init(({

apiKey: 'pk_live_abc123',

listingId: 'MLS-12345',

mode: 'request', // always show request form

primaryColor: '#8b5cf6'

});

</script>

456 Oak Avenue

Los Angeles, CA 90028

4 bed / 3 bath / 2,400 sq ft

$2,150,000

How Request Mode Works

1. Widget displays a showing request form
2. Buyer enters name, email, phone, and preferred dates
3. Request submitted via /api/v1/widget/request
4. Showingly coordinates with the listing agent
5. Buyer is notified when showing is confirmed

4. Custom Buttons & Colors

Trigger the widget from your own custom buttons with different brand colors.

5. Event Listeners

Listen to widget events for analytics integration (Google Analytics, Facebook Pixel, CRM, etc.)

// Success event — fires for both schedule and request modes

window.addEventListener('showingly:success', (event) => {

console.log('Showing created:', event.detail);

// event.detail includes: { id, status, listing_id, scheduled_at }

gtag('event', 'showing_booked', { listing_id: event.detail.listing_id });

});

Live Event Log:

No events yet. Try scheduling a showing!

Configuration Reference

Option	Type	Default	Description
apiKey	string	required	Your partner API key
listingId	string	--	Listing UUID or MLS ID
mode	'auto' \| 'schedule' \| 'request'	'auto'	auto: checks listing status and picks the best mode. schedule: always shows time slot picker. request: always shows request form.
apiUrl	string	https://www.showingly.com	API base URL (override for development)
primaryColor	string	#5DBD77	Brand color for buttons and accents
position	string	'bottom-right'	Floating button position, or 'inline' for embedded
buttonText	string	'Schedule a Showing'	Text displayed on the floating button
theme	'light' \| 'dark' \| 'auto'	'light'	Widget color scheme
debug	boolean	false	Enable console logging for development

4 KB

Gzipped Size

14 KB

Minified Size

< 100ms

Load Time

Dependencies

Features

Auto Mode Detection

Automatically shows time slots or request form based on listing status

Time Slot Picker

Browse and select available showing times from the agent's calendar

Zero Dependencies

No jQuery, React, or other frameworks required

Responsive Design

Works perfectly on desktop, tablet, and mobile

Custom Branding

Match your brand colors and styling

Event System

Integrate with analytics and CRM systems

Email Notifications

Listing agents receive instant email when a showing is booked

Security First

XSS protection, API key authentication, HTTPS

Ready to Integrate?

Add showing scheduling to your real estate website in minutes. Two lines of code to get started.

View API Status Back to Home