Getting Started

This guide will walk you through the process of integrating the Sounds Market TradeIns widget into your website. The integration process is straightforward and can be completed in just a few steps.

Prerequisites

Before you begin, make sure you have:

A valid API key (contact us to get one)
Access to your website’s HTML code
Basic knowledge of HTML and JavaScript

Quick Start

For a basic integration, follow these three simple steps:

Add the script to your website’s <head>:

<script src="https://kvbapluenoslmzulawuc.supabase.co/storage/v1/object/public/widget/soundsmarket-trade-ins.js"></script>

Add the container div where you want the widget to appear:

<div id="soundsmarket-trade-ins"></div>

Initialize the widget with your API key:

<script>
  window.addEventListener('DOMContentLoaded', () => {
    window.SoundsMarketTradeIns.init({
      apiKey: 'YOUR_API_KEY'
    })
  })
</script>

For more configuration options, check our Configuration guide.

Complete Example

Here’s a complete example showing how to integrate the widget with all available options:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kvbapluenoslmzulawuc.supabase.co/storage/v1/object/public/widget/soundsmarket-trade-ins.js"></script>
  </head>
  <body>
    <div id="soundsmarket-trade-ins"></div>

    <script>
      window.addEventListener('DOMContentLoaded', () => {
        window.SoundsMarketTradeIns.init({
          apiKey: 'YOUR_API_KEY',
          selector: '#soundsmarket-trade-ins',
          locale: 'en'
        })
      })
    </script>
  </body>

</html>

To see the widget in action, check out our Demo page.