Pricing Widget

AI-generated embeddable pricing widget that matches your website's design and showcases your service plans.

The pricing widget is an embeddable component that displays your service plans and pricing on your marketing website. NextRoute uses AI to analyze your website's design and generate a widget that matches your brand automatically.

How It Works

You provide your marketing website URL
NextRoute scrapes your site and analyzes its design (colors, fonts, layout, platform)
AI generates multiple widget design variants that match your site
You preview the variants, pick the one you like, and activate it
Add a single <script> tag to your website to embed the widget

Step 1: Analyze Your Website

From the dashboard, navigate to Tools > Pricing Widget and enter your marketing website URL. The system will:

Detect your website platform (WordPress, Squarespace, Wix, etc.)
Extract your color palette, fonts, and design patterns
Save the URL to your tenant settings

Step 2: Generate Variants

After analysis, click Generate Widgets to create multiple design variants. Each variant uses your detected brand styles but with different layouts:

Card layout — plans displayed as individual cards in a row
Comparison table — side-by-side feature comparison
Compact list — minimal vertical list for sidebars

Step 3: Preview and Activate

Review each variant in the preview pane. When you find one you like:

Click Activate on the chosen variant
Only one variant can be active at a time
The previous active variant is automatically deactivated

Step 4: Embed on Your Website

Copy the embed code and add it to your website:

<script src="https://api.nextroute.app/api/pricing-widget/embed/your-business-slug"></script>

Place this <script> tag wherever you want the pricing widget to appear. It renders inside a Shadow DOM to avoid CSS conflicts with your site.

How the Embed Works

The embed script:

Creates a container element with Shadow DOM isolation
Injects the widget HTML into the shadow root
Executes any interactive scripts within the shadow DOM
Links plan selection buttons to your enrollment form

The widget is served with:

Cache-Control: public, max-age=300 — 5-minute browser cache for performance
Access-Control-Allow-Origin: * — works on any domain
Content-Type: application/javascript

Managing Widgets via API

List Widgets

curl https://api.nextroute.app/api/pricing-widget \
  -H "Authorization: Bearer YOUR_TOKEN"

Response includes all generated variants, the embed URL, and your tenant slug.

Analyze a Website

curl -X POST https://api.nextroute.app/api/pricing-widget/analyze \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://yourwebsite.com"}'

curl -X POST https://api.nextroute.app/api/pricing-widget/generate \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "style": { "platform": "wordpress", "colors": ["#2563eb", "#fff"] },
    "marketing_url": "https://yourwebsite.com"
  }'

Activate a Variant

curl -X PUT https://api.nextroute.app/api/pricing-widget/WIDGET_ID/activate \
  -H "Authorization: Bearer YOUR_TOKEN"

Service Plan Requirements

The widget displays your public, recurring service plans. For plans to appear:

is_active must be 1
visibility must be public
plan_type must be recurring

Plans are sorted by price (lowest first). If you have no qualifying plans, widget generation will fail with an error message prompting you to create plans first.

Customization Tips

Make sure your service plans have clear names and descriptions — these are displayed directly in the widget
Set accurate prices — the widget shows the price from price_cents
Include the frequency (weekly, biweekly, monthly) — displayed alongside the price
Update your branding in General Settings to keep the widget current

Service Plans — plans displayed in the widget
Address Widget — service area checker widget
Enrollment Forms — where widget CTAs link to