Embed products into your own site

At times, you may want to embed products into a custom-built site of your own, but you don't want to go through the hassle of writing code and/or interacting with our API.

In that event, we offer a seamless embed modal that can be displayed within your own site, and lets visitors make purchases without leaving your website or be redirected to a SellApp product page.

Let's dive into how you can do so.

Generating embed code

To start generating embed code, you'll want to navigate to your products dashboard

For the relevant product(s), toggle them on the left hand side next to the product's title
Once you've toggled all of the products you'd like to embed, select the "Generate embed code" option in the navigation bar. Here's how that looks

Toggled embed

A modal will pop up with a HTML file. Here's what you'll want to do:
1. Copy the <link href="https://cdn.sell.app/embed/style.css" rel="stylesheet" /> and place it in your site's <head> section
2. Copy the <script src="https://cdn.sell.app/embed/script.js" type="module"></script> and place it right before your site's closing </body> section
3. Copy the button(s) and place it in the relevant area where your customer will click

Once done, save your site's code and you'll be good to go. Now, when a visitor clicks on the button that you've pasted, our embed modal will appear and seamlessly guide the visitor through the purchase process.

Embed options

As you may have noticed, the embed button's code has a few options that you can set. Here's what they are:

data-sell-darkmode
- By default, this is set to false. Our embed is shown in 'normal/light' mode, meaning the embed's background is light and all elements are clear.
- You can set the value to true if you'd like the embed to be dark mode; this will make the embed's background dark and all elements darker.
data-sell-theme
- This input accepts a 6-digit HEX color such as #000000 or #FFFFFF. The HEX color passed will be used to style certain elements within your embed, so feel free to personalize it to your liking.
data-sell-variant
- In the event your product has multiple variants and you want to display a specific variant immediately, you can do so by passing the variant's ID in this value.

Happy selling!