Widget SDK | Sweet Spot API Documentation

The Sweet Spot Widget SDK allows you to embed lease pricing information directly on your product pages. When customers view a product, they can instantly see available lease terms and monthly payment options.

Quick Start

Add the following code to your product page:

HTML

<div id="sweetspot-widget"></div>

<script>
  window._sweetspot_config = {
    public_api_key: "your_api_key",
    sku: "your_product_variant_id"
  };
</script>
<script src="https://widget.thesweetspot.com/widget.js"></script>

That's it! The widget will automatically display lease options for the specified product.

Installation

CDN (Recommended)

Include the widget script from our CDN:

<script src="https://widget.thesweetspot.com/widget.js"></script>

Staging Environment

For testing, use the staging CDN:

<script src="https://staging.widget.thesweetspot.com/widget.js"></script>

Configuration

Configure the widget by setting window._sweetspot_config before loading the script.

Configuration Options

Option	Type	Required	Default	Description
`public_api_key`	string	Yes	-	Your Sweet Spot public API key
`sku`	string	Yes	-	Product variant ID (e.g., `pvar_abc123`)
`environment`	string	No	`"production"`	API environment: `"staging"` or `"production"`
`container`	string	No	`"#sweetspot-widget"`	CSS selector for widget container
`showWhyLease`	boolean	No	`true`	Show "Why Lease?" information in modal
`showDisclaimer`	boolean	No	`true`	Show disclaimer text in modal
`theme`	`'light'` \| `'dark'`	No	`'light'`	Widget color theme for light or dark backgrounds
`compact`	boolean	No	`false`	Enable compact display mode with minimal UI
`textColor`	string	No	(auto based on theme)	Custom text color override (CSS color value, e.g., `'#333'` or `'white'`)
`accent`	string	No	(default brand color)	Custom accent color for interactive elements
`demo`	boolean	No	`false`	Enable demo mode for testing without real API data
`trackPageViews`	boolean	No	`false`	Enable page view analytics tracking

Full Configuration Example

HTML

<script>
  window._sweetspot_config = {
    public_api_key: "sst_live_xxxxx",
    sku: "pvar_c9379b4d-2aae-4",
    environment: "production",
    container: "#sweetspot-widget",
    showWhyLease: true,
    showDisclaimer: true
  };
</script>

Programmatic API

For more control, you can initialize the widget programmatically using the JavaScript API.

Initialize Widget

JavaScript

window.SweetSpotWidget.init({
  public_api_key: "your_api_key",
  sku: "pvar_abc123",
  container: "#my-custom-container"
});

Multiple Widgets

You can display multiple widgets on the same page:

HTML

<div id="widget-product-1"></div>
<div id="widget-product-2"></div>

<script>
  // Initialize first widget
  window.SweetSpotWidget.init({
    public_api_key: "your_api_key",
    sku: "pvar_product_1",
    container: "#widget-product-1"
  });

  // Initialize second widget
  window.SweetSpotWidget.init({
    public_api_key: "your_api_key",
    sku: "pvar_product_2",
    container: "#widget-product-2"
  });
</script>

Destroy Widget

Remove all widget instances:

JavaScript

window.SweetSpotWidget.destroy();

API Keys

Obtaining an API Key

Contact Sweet Spot to obtain your public API key. You'll receive:

Production key: sst_live_xxxxx - Use in production
Test key: sst_test_xxxxx - Use for development and testing

Key Security

Public API keys are safe to include in client-side code
Keys are scoped to specific organizations and have read-only access
Never share or expose your secret API keys

Environments

Environment	Widget URL	API URL
Production	`https://widget.thesweetspot.com/widget.js`	`https://api.thesweetspot.com`
Staging	`https://staging.widget.thesweetspot.com/widget.js`	`https://staging.api.thesweetspot.com`

When using the staging widget URL, set environment: "staging" in your configuration:

HTML

<script>
  window._sweetspot_config = {
    public_api_key: "sst_test_xxxxx",
    sku: "pvar_abc123",
    environment: "staging"
  };
</script>
<script src="https://staging.widget.thesweetspot.com/widget.js"></script>

Widget Behavior

Loading State

The widget shows nothing while loading to prevent layout shifts.

No Availability

If a product doesn't have lease options available, the widget will not render anything.

Error Handling

The widget fails silently on errors to avoid disrupting your page. Check the browser console for debugging information.

This allows safe embedding on any page. If the product isn't leasable or doesn't exist, nothing is displayed.

Styling

The widget uses Shadow DOM to encapsulate its styles, ensuring:

Widget styles don't leak into your page
Your page styles don't affect the widget
Consistent appearance across all websites

Container Styling

You can style the container element to control widget placement:

CSS

#sweetspot-widget {
  margin-top: 16px;
  padding: 12px;
  border-top: 1px solid #eee;
}

Custom Styling

Customize the widget appearance using theme and color options:

HTML

<div id="sweetspot-widget"></div>

<script>
  window._sweetspot_config = {
    public_api_key: "your_public_api_key",
    sku: "your_product_sku",
    theme: "dark",
    textColor: "#ffffff",
    compact: true
  };
</script>

<script src="https://widget.thesweetspot.com/widget.js"></script>

Note: The dark theme uses pure white (#ffffff) text by default. The textColor option allows overriding this if needed.

Complete Example

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Product Page</title>
</head>
<body>
  <div class="product">
    <h1>Premium Bike</h1>
    <p class="price">$18,999</p>

    <!-- Sweet Spot Widget -->
    <div id="sweetspot-widget"></div>
  </div>

  <script>
    window._sweetspot_config = {
      public_api_key: "sst_live_xxxxx",
      sku: "pvar_c9379b4d-2aae-4"
    };
  </script>
  <script src="https://widget.thesweetspot.com/widget.js"></script>
</body>
</html>

Troubleshooting

Widget Not Appearing

Check container exists: Ensure an element with the configured selector exists in the DOM
Verify API key: Confirm your API key is valid and has the correct permissions
Check product variant: Ensure the product variant ID is correct and has lease options
Console errors: Check the browser console for error messages

CORS Errors

The widget handles CORS automatically. If you see CORS errors, ensure you're using the correct API key for your domain.

Caching

Widget assets are cached aggressively for performance. Changes may take a few minutes to propagate after deployment.

Browser Support

The widget supports all modern browsers:

Chrome 60+
Firefox 55+
Safari 11+
Edge 79+

Need Help?

For technical support or questions, contact support@thesweetspot.com.