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

# Add Smile to your frontend

> Embed loyalty functionality into any website or custom storefront using Smile's JavaScript SDK, Smile UI, or both.

You can add Smile to any website or custom storefront you've built, as long as your customer and order data are powered by a supported platform (such as Shopify or BigCommerce). How you integrate depends on the experience you want.

## Choose how to integrate

* **Fully custom rewards UI** — Use the [JavaScript SDK](/js/introduction) to build your own loyalty experience from scratch. The SDK gives you full control over the UI and works well in single-page and headless setups.
* **Pre-built loyalty panel** — Use [Smile UI](/ui/introduction) to add Smile's popup loyalty panel and launcher with minimal code. Best when you want to include loyalty information without building or maintaining a custom UI.
* **Both** — Use the SDK for custom flows (e.g. embedded redemption at checkout) and Smile UI for the panel. Pass `includeSdk: true` when [initializing Smile UI](/ui/initializing) to load the JavaScript SDK alongside it.

## Platform-specific guides

<CardGroup cols={2}>
  <Card title="Headless / SPA" icon="display" href="/guides/use-cases/custom-frontend/headless">
    Add Smile to any headless or Single Page Application frontend.
  </Card>
</CardGroup>