In this article:

• Overlay
  • Using custom buttons
  • Inserting multiple buttons
  • Send customers directly to checkout
• Embed
• FAQs

While there is always the option to redirect your customers to your BlackSea product page, creators and affiliates can also use our Overlay or Embed widgets to open the product page right on their websites.

You will need the ability to edit your website’s HTML to make Overlay/Embed work.

Overlay

Go to Settings → Widgets, select “Modal Overlay”, pick a product, change the button text and color (black, green or white) if you wish, and click “Copy embed code”.

Now go to your website’s HTML editor and paste this code wherever you wish to place the buy button.

If you are using website builders like Squarespace, Wordpress, Webflow, Carrd, etc., and are facing trouble while placing this code, please check out their documentation or contact their support teams.

Once installed, clicking the buy button will open the product page right on your website, and the customer will be redirected to BlackSea’s checkout page upon clicking the “Add to cart” button from where they can purchase multiple products at once.

Using custom buttons

You can replace the native “Buy on BlackSea” button with your custom-designed button, an image, or just plain text by removing the attribute from the <a> tag.

Your code will then look something like this:

<script src="https://blacksea.in.ua/js/blacksea.js"></script> <a href="https://user.blacksea.in.ua/l/prod1">Buy on</a> 

Inserting multiple buttons

If you wish to insert multiple overlay buttons on your website, either for the same product or different products, you only need to include the BlackSea JS script once. Inserting the <script> line multiple times can lead to errors.

For multiple buttons, your code will look something like this:

<script src="https://blacksea.in.ua/js/blacksea.js"></script> <a href="https://user.blacksea.in.ua/l/prod1">Buy on</a> <a href="https://user.blacksea.in.ua/l/prod2">Buy on</a> 

Send customers directly to checkout

To send the customer directly to the checkout page upon clicking the buy button, toggle on “Send directly to checkout page” on the Widgets page before copying the code.

Embed

To embed the entire product page on the website instead of having a pop-up window, click on “Embed” on your Widgets page, choose the product you wish to embed and click “Copy embed code”.

Customers will be redirected to BlackSea’s checkout page upon clicking “Add to cart” and completing the purchase from there.

FAQs

Q. Can I complete the checkout on my website, instead of redirecting customers to BlackSea?

A: Sorry, that’s not possible. The checkout page will allow us to add new features like upsells, cross-sells, retargeting using JS embedded on the product page itself, and more going ahead!

Q. Can I customize the look of the checkout page with CSS?

A: Not yet, sorry!

Q. Can I apply discount codes to my overlay/embed product pages?

A: Yes! Go to your product’s “Checkout” tab and get the discounted product’s URL by clicking the “Share” button next to the coupon’s name. Now paste this URL in your widget’s href attribute.

Q. Can I autofill some checkout information while sending the customer from my website to the checkout page?

A: Yes! Check out our URL parameters article to see which fields you can autofill on the checkout page.