Installation Guide

1 Add the Script

Copy and paste this single line of code before the closing </body> tag of your website:

<script
  src="https://d3496evgissos3.cloudfront.net/embed.js"
  data-workspace="your-workspace-id"
></script>Copy

Replace your-workspace-id with your workspace ID.

2 Choose Your Style

The widget supports multiple display styles to fit your site design:

Example with Style

<script
  src="https://d3496evgissos3.cloudfront.net/embed.js"
  data-workspace="fps-loans"
  data-style="bubble"
  data-position="bottom-right"
></script>Copy

3 Customize the Theme

Choose a preset theme or use custom colors to match your brand:

Using a Theme Preset

<script
  src="https://d3496evgissos3.cloudfront.net/embed.js"
  data-workspace="fps-loans"
  data-theme="blue"
></script>Copy

Custom Colors

<script
  src="https://d3496evgissos3.cloudfront.net/embed.js"
  data-workspace="fps-loans"
  data-accent-primary="#8b5cf6"
  data-accent-secondary="#06b6d4"
></script>Copy

All Configuration Options

Demo Workspaces

Try the widget with these pre-configured demo workspaces:

Programmatic Control

Control the widget with JavaScript after it loads:

// Open the chat panel
window.PromptMySite.open();

// Close the chat panel
window.PromptMySite.close();

// Toggle open/closed
window.PromptMySite.toggle();

// Get current configuration
const config = window.PromptMySite.getConfig();

// Switch to a different workspace
await window.PromptMySite.switchWorkspace('new-workspace-id');

// List available workspaces
const workspaces = await window.PromptMySite.listWorkspaces();Copy

Programmatic Initialization

Initialize the widget entirely via JavaScript (no data-workspace attribute needed):

<script src="https://d3496evgissos3.cloudfront.net/embed.js"></script>
<script>
  // Initialize when ready
  window.PromptMySite.init({
    workspaceId: 'fps-loans',
    style: 'bubble',
    theme: {
      preset: 'blue'
    }
  });
</script>Copy

Shopping Cart Integration

If your site sells products, the widget can add items directly to your shopping cart. Visitors browse products through the AI chat, collect items in a list, then click "Checkout" to add everything to their real cart in one go.

How It Works

The widget has a built-in staging area (the split panel). When visitors browse products, they click "Add" on items they like. These items collect in a sidebar list. When they're ready, they click "Checkout" and the items go into your site's real shopping cart.

Step 1: Enable the Split Panel

Add data-split-panel="true" to your widget script tag. This enables the sidebar where items collect before checkout:

<script
  src="https://d3496evgissos3.cloudfront.net/embed.js"
  data-workspace="your-workspace-id"
  data-style="immersive"
  data-split-panel="true"
></script>Copy

Step 2: Connect Your Cart

If you're on Shopify or WooCommerce — you're done. The widget auto-detects your platform and calls your cart API when the visitor clicks "Checkout". No extra code needed.

For all other sites — add this snippet after the widget script. It tells the widget what to do when someone clicks "Checkout":

<script>
  // This runs when a visitor clicks "Checkout" in the widget.
  // "items" is the list of products they selected.
  window.PromptMySite.onCheckout = function(items) {

    // Each item has: id, title, price, image, and more.
    // Use your site's own cart/basket function here.
    items.forEach(function(item) {
      // Replace this with YOUR site's "add to cart" code:
      yourCart.addItem(item.id, 1);
    });

    // Return { clear: true } to empty the widget's list after checkout.
    // Remove this line if you want the list to stay visible.
    return { clear: true };
  };
</script>Copy

Platform-Specific Examples

Shopify (auto-detected, but if you want to customize):

window.PromptMySite.onCheckout = async function(items) {
  // Shopify uses variant IDs for cart. If your products have
  // a single variant, the product ID works as the variant ID.
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      items: items.map(function(item) {
        return { id: Number(item.id), quantity: 1 };
      })
    })
  });
  return { clear: true };
};Copy

WooCommerce (auto-detected, but if you want to customize):

window.PromptMySite.onCheckout = async function(items) {
  for (const item of items) {
    const body = new URLSearchParams({
      product_id: item.id,
      quantity: '1'
    });
    await fetch('/?wc-ajax=add_to_cart', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: body.toString()
    });
  }
  return { clear: true };
};Copy

Custom REST API:

window.PromptMySite.onCheckout = async function(items) {
  const response = await fetch('/api/cart/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      items: items.map(function(item) {
        return { productId: item.id, quantity: 1 };
      })
    })
  });

  if (!response.ok) {
    throw new Error('Failed to add to cart');
  }

  // Update your page's cart counter if you have one
  document.querySelector('.cart-count').textContent = items.length;

  return { clear: true };
};Copy

Testing It

To quickly test that your cart integration works, open your browser's developer console and run:

// Add a test item to the widget's list
window.PromptMySite.getListStore().addItem({
  id: 'test-123',
  type: 'product',
  title: 'Test Product',
  price: 29.99,
  currency: 'USD'
});

// The split panel should open with the item.
// Click "Checkout" to trigger your onCheckout handler.Copy