> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getjasin.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Cards

> Create beautiful, embeddable Amazon product cards for your website

## Overview

Jasin transforms Amazon product URLs into clean, beautiful product cards that you can embed on any
website. Simply paste an Amazon link, customize the appearance, and get a script tag to embed
anywhere.

***

## Creating Embed Cards

### From the Dashboard or My Products Page

1. **Sign in** to your Jasin dashboard at [getjasin.com](https://getjasin.com)
2. **Click the "Add Product" button** - This opens a modal to add a new product
3. **Paste Amazon URL** - Copy any Amazon product URL into the input field
4. **Preview your card** - See exactly how it will look on your website
5. **Choose theme** - Select light or dark theme
6. **Save** - Click the "Save" button to save the product
7. **Copy the embed code** - Use the script tag anywhere you want the product card to appear

### What You Get When Creating an Embed Card

Each embed generates a simple script tag like this:

```html theme={"system"}
<script
  async
  src="https://getjasin.com/loader.js"
  data-id="5faa7658-e0e0-403c-a484-49d19e6321e3"
  data-theme="light"
  data-show-badge="true"
></script>
```

***

## Embed Features

### Product Information

Your embedded cards automatically include:

* **High-quality product images** from Amazon
* **Product title** and key details
* **Current price** and availability
* **Prime badge** when applicable
* **"View on Amazon" button** with affiliate tracking

### Responsive Design

* **Mobile-first** - Looks great on all devices
* **Flexible sizing** - Adapts to your website's layout
* **Fast loading** - Optimized for performance
* **Lightweight & fast** - Optimized script with minimal footprint

***

## Theme Options

<Tabs>
  <Tab title="Light Theme">
    Clean, minimal design with light backgrounds perfect for most websites.

    * White background
    * Dark text for readability
    * Subtle shadows and borders
    * Works great on light-colored sites
  </Tab>

  <Tab title="Dark Theme">
    Modern dark design that works great on dark websites.

    * Dark background
    * Light text for contrast
    * Subtle highlights
    * Perfect for dark-themed sites
  </Tab>
</Tabs>

***

## Customization Options

### Free Plan Features

* **Two themes** - Light and dark
* **Standard sizing** - Optimized dimensions
* **Basic analytics** - View and click tracking
* **Amazon affiliate support** - Uses default Jasin affiliate tag
* **10 total embeds** - Lifetime limit

### Pro Plan Features

Everything in the free plan, plus:

* **25 embeds per month** - Monthly credit refresh
* **Custom affiliate tags** - Use your own Amazon affiliate ID to earn commissions
* **Advanced analytics** - Detailed insights with bot filtering
* **Remove "Powered by Jasin" badge**
* **Priority support** - 48-hour response time

### Pro Plus Plan Features

Everything in Pro, plus:

* **100 embeds per month** - Higher monthly credit limit
* **Priority support** - 24-hour response time

***

## Best Practices

<CardGroup cols={2}>
  <Card title="Placement" icon="map-pin">
    Place embed cards within relevant content for better engagement and higher click-through rates
  </Card>

  <Card title="Context" icon="align-left">
    Add context around your embeds - explain why you're recommending the product
  </Card>

  <Card title="Theme Choice" icon="palette">
    Choose themes that match your website's design for a seamless experience
  </Card>

  <Card title="Performance" icon="clock">
    The script loads asynchronously so it won't slow down your page
  </Card>
</CardGroup>

***

## Common Use Cases

### Blog Posts

Perfect for product recommendations within your blog content:

```html theme={"system"}
<p>I've been using this coffee maker for months and absolutely love it:</p>

<script
  async
  src="https://getjasin.com/loader.js"
  data-id="2d19689e-d85c-4837-b747-84f5e18c34c8"
  data-theme="light"
  data-show-badge="true"
></script>

<p>The programmable features make my mornings so much easier!</p>
```

### Product Reviews

Great for detailed product review articles:

```html theme={"system"}
<h2>Our Top Pick: Best Wireless Headphones</h2>

<script
  async
  src="https://getjasin.com/loader.js"
  data-id="2d19689e-d85c-4837-b747-84f5e18c34c8"
  data-theme="light"
  data-show-badge="true"
></script>

<p>After testing 15 different models, these headphones stood out...</p>
```

***

## Technical Details

### How It Works

1. **Script loads** - The loader.js script loads asynchronously
2. **Card renders** - Product data is fetched and the card is displayed
3. **Tracking starts** - View tracking begins when the card is visible
4. **Click tracking** - Clicks are tracked when users click through to Amazon

### Performance

* **Lazy loading** - Cards only load when they're about to be visible
* **Cached data** - Product information is cached for fast loading
* **Minimal footprint** - Small script size for fast page loads
* **No dependencies** - Works without jQuery or other libraries

### Compatibility

* **All modern browsers** - Works in Chrome, Firefox, Safari, Edge
* **Mobile responsive** - Optimized for phones and tablets
* **CMS friendly** - Works with WordPress, Squarespace, Ghost, and more
* **Email compatible** - Can be used in HTML emails (with limitations)

### Pricing Display

* **Currency format** - Prices display in USD as sourced from Amazon's US marketplace
* **International users** - When users click through to Amazon, they'll see local currency
  conversion at checkout
* **Affiliate compatibility** - USD pricing ensures proper affiliate tracking and commission
  attribution
* **Consistent experience** - All embed cards show the same currency format regardless of viewer
  location

***

## Analytics & Tracking

Every embed automatically tracks:

* **Views** - When the product card is displayed
* **Clicks** - When users click through to Amazon
* **Performance** - Click-through rates and engagement

View detailed analytics in your dashboard to see which products perform best.

***