Embed Widgets

AllServicePros provides drop-in UI components that you can embed directly into your website. These widgets are fully responsive, accessible, and automatically handle API communication.

Installation

Include the widget script in your HTML <head>:

<script src="https://cdn.allservicepros.net/widgets/v1/embed.js" async></script>

Available Widgets

1. Booking Widget

Allow customers to book appointments directly from your site.

<div 
  class="asp-widget" 
  data-widget-type="booking" 
  data-professional-id="pro_123"
  data-theme="light"
></div>

2. Rating Badge

Display your verified AllServicePros rating.

<div 
  class="asp-widget" 
  data-widget-type="rating-badge" 
  data-professional-id="pro_123"
  data-layout="horizontal"
></div>

3. Reviews Carousel

Showcase your latest verified reviews.

<div 
  class="asp-widget" 
  data-widget-type="reviews" 
  data-professional-id="pro_123"
  data-limit="5"
></div>

Configuration Options

All widgets support the following global data attributes:

data-theme: light | dark | auto (default: auto)
data-primary-color: Hex color code (e.g., #3b82f6)
data-font-family: CSS font family string

JavaScript API

You can also initialize widgets programmatically:

window.ASP.initWidget({
  container: '#my-booking-container',
  type: 'booking',
  professionalId: 'pro_123',
  theme: 'dark',
  onComplete: (booking) => {
    console.log('Booking completed!', booking);
  }
});