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

# Coupon auto-apply

> Specific integration instructions to enable coupon auto-apply.

Sleek's Web Extension SDK automatically inputs coupon codes into checkout and cart pages.
This documentation will guide you through the integration process.

<Warning>
  This document assumes that you have already integrated the Sleek web extension SDK into your
  extension. If you haven't, please refer to the [Web Extension SDK integration
  guide](/web-ext-sdk-reference/introduction).
</Warning>

## Check coupon page support

Use the `checkCouponPageSupport()` method to manually check whether a tab's page supports coupon auto-apply.
This method can only be called after the SDK's automatic page load check has completed, and can be called a maximum of 3 times per page load.

It returns a `CouponPageSupportResult` with:

* `supported` - whether the current page supports coupon entry.
* `autoApplyAvailable` - whether automatic coupon application is available on this page.

<CodeGroup>
  ```typescript Typescript theme={null}
  import { getWebExtSdk } from "@sleek/web-ext-sdk";

  const result = await getWebExtSdk().onTab(tabId).checkCouponPageSupport();
  console.log(result.supported); // true or false
  console.log(result.autoApplyAvailable); // true or false
  ```
</CodeGroup>

## Start coupon auto-apply

Use the `startCouponAutoApply(codes: string[])` method provided by the web extension SDK to start the coupon application on a tab.

<CodeGroup>
  ```typescript Typescript theme={null}
  import { getWebExtSdk } from "@sleek/web-ext-sdk";

  getWebExtSdk().onTab(tabId).startCouponAutoApply(['SAVE10', 'SAVE20', 'SAVE30']);
  ```
</CodeGroup>

## Register for the coupon auto-apply events

Sleek's web extension SDK automatically handles restarting CAA after page reloads, finding the
best coupon for the cart, and more. The result and status of CAA is emitted
using the web extension SDK's event listener. Subscribe to events that you care about to
create UX for your users that shows the status of coupons and the savings that
users earn.

For example, you might want to show UI when coupons start to get entered on a
tab and when the CAA process finishes. To do so, you can follow a pattern
like:

```typescript theme={null}
import { getWebExtSdk } from "@sleek/web-ext-sdk";
import { SdkEventType } from "@sleek/sdk";

getWebExtSdk().registerEventListener((event, { tabId }) => {
  // `event` is typed, so is the data of the event `event.data` based on the type of the event.
  switch (event.type) {
    case SdkEventType.COUPON_SESSION_STARTED:
      browser.tabs.sendMessage(tabId, {
        message: "CAA_STARTED",
      });
      break;
    case SdkEventType.COUPON_SESSION_RESUMED:
      browser.tabs.sendMessage(tabId, {
        message: "CAA_RESUMED",
      });
      break;
    case SdkEventType.COUPON_SESSION_UPDATED:
      browser.tabs.sendMessage(tabId, {
        message: "CAA_UPDATED",
      });
      break;
    case SdkEventType.COUPON_SESSION_COMPLETED:
      browser.tabs.sendMessage(tabId, {
        message: "CAA_COMPLETE",
      });
      break;
  }
});
```

## Register for user generated code (UGC) events

Once CAA has been enabled and run on a tab, the user may enter a coupon code
into the page. This coupon code is called a user generated code (UGC). UGC
events are emitted by the web extension SDK when UGC is detected on a tab.

To register for UGC events, you can follow a pattern like:

```typescript theme={null}
import { getWebExtSdk } from "@sleek/web-ext-sdk";
import { SdkEventType } from "@sleek/sdk";

getWebExtSdk().registerEventListener((event, { tabId }) => {
  // `event` is typed, so is the data of the event `event.data` based on the type of the event.
  switch (event.type) {
    case SdkEventType.USER_GENERATED_CODE:
      // Emitted when a user generated code is detected on a tab.
      // Shape of the event is:
      // interface UserGeneratedCodeEvent {
      //   type: SdkEventType.USER_GENERATED_CODE;
      //   data: {
      //     code: string;
      //   };
      // }
      console.log(event.data.code); // Do something with the UGC.
      break;
  }
});
```

**What's next:**

Now that you have enabled coupon auto-apply in your extension, you can check out the TypeDoc for specific event types and methods on the web extension SDK.

<Card title="View TypeDoc" icon="terminal" href="/web-ext-sdk-reference/type-doc">
  Browse the reference TypeDoc for the web extension SDK.
</Card>