# Embedding SellAll Products on External Websites

SellAll offers an easy way to embed your products on external websites, allowing you to sell directly from your own site or blog. This feature enables you to reach a wider audience and provide a seamless shopping experience for your customers.

# How to Generate an embed to your product on SellAll

Log in to your SellAll account and navigate to the product you want to embed.
Look for the "Embed" or "Share" option near the product details.
Click on the "Embed" button to generate the embed code.
Copy the generated embed code.
Paste the embed code into the HTML of your website where you want the product to appear.

# Embed Code Example

The embed code will look similar to this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Embed Example</title>
    <link rel="stylesheet" href="https://static.sellall.cc/embeds/styles.min.css" />
  </head>
  <body>
    <button class="openIframeBtn" data-product-id="66b9a1bfa1a29dca0bee8f0d" data-domain="https://biz1.sellall.cc">Open Product 1</button>

    <button class="openIframeBtn" data-product-id="66d16cacf71b835428575ad7" data-domain="https://biz1.sellall.cc">Open Product 2</button>

    <button class="openIframeBtn" data-product-id="66d16cacf71b835428575ad7" data-domain="https://biz1.sellall.cc" data-variant="Test">
        Open Product 2 ( Test Variant )
    </button>

    <script src="https://static.sellall.cc/embeds/script.min.js"></script>
  </body>
</html>

You can view a live example of this embed code in action at our hosted example page.

# How does the Embed Code Work?

CSS file: https://static.sellall.cc/embeds/styles.min.css This file contains the necessary styles for the modal and buttons, ensuring a consistent and attractive appearance.
JavaScript file: https://static.sellall.cc/embeds/script.min.js This file contains the logic for opening the modal and handling the product display. It looks for buttons with the class openIframeBtn and attaches click event listeners to them.

The JavaScript file works by:

Finding all elements with the class openIframeBtn
Adding a click event listener to each button
When clicked, it reads the data-product-id and data-domain attributes
Uses this information to open a modal with the correct product details

The output will be a button that, when clicked, opens a modal with the product details and the option to purchase.

# Note for React and Other Frameworks

If you're using React, Vue, Angular, or other similar frameworks, you may need a custom solution to integrate the SellAll embed. These frameworks often have their own ways of handling DOM manipulation and event listeners.

For custom solutions and integration guides for specific frameworks, please refer to our Advanced Integration Guide. This guide provides detailed instructions for integrating SellAll embeds with various popular frameworks and libraries.