
<CartWidgetPage group="settings" />

<Method id="config" signature="window.subblyConfig">

The object the widget reads once, the moment its script runs. Write it before
the script tag.
[`SubblyCart.initialize(config)`](/reference/cart-widget/methods#initialize)
takes the same object. Only `apiKey` is required.

<Params title="Keys">
  <Param name="apiKey" required type="string">
    Your Storefront API key, from the Subbly admin under Settings, Developers.
    A missing key throws `Missing required apiKey config`.
  </Param>
  <Param name="apiUrl" optional type="string">
    API the widget calls. Default `https://api.subbly.co/storefront/v1/`. An
    empty string falls back to the default.
  </Param>
  <Param name="settings" optional type="object">
    Page-integration settings: which links the widget catches, which element
    opens it, which element shows the item count. Every key is on
    [Settings keys](#settings). Default `{}`.
  </Param>
  <Param name="languageCode" optional type="string">
    Two-letter language of the widget. Without it, the widget takes the `lang`
    query parameter of the page, then the `lang` attribute of `<html>`, then
    the browser's language, and keeps the first two characters.
  </Param>
  <Param name="cartId" optional type="string">
    Start from a cart you already know. Default the `subbly_cart_id` cookie.
  </Param>
  <Param name="accessToken" optional type="string">
    Sign a customer in at start-up. A valid token is written to the
    `subbly_access_token` cookie. Default that cookie.
  </Param>
  <Param name="init" optional type="boolean">
    `false` stops the automatic start-up; you then call
    [`SubblyCart.initialize`](/reference/cart-widget/methods#initialize)
    yourself. Only the exact value `false` does this. Default `true`.
  </Param>
  <Param name="globalName" optional type="string">
    Name of the global that gets the instance. A value that is not a non-empty
    string is ignored. Default `subblyCart`.
  </Param>
  <Param name="sdkClient" optional type="Subbly">
    A Subbly.js client you already built. The widget uses it instead of
    creating its own.
  </Param>
  <Param name="checkoutOnly" optional type="boolean">
    Standalone checkout. The widget opens full screen and configures the item
    from `window.subblyCheckout.payload` at once. Default `false`.
  </Param>
  <Param name="checkoutUrl" optional type="string">
    Page on your site that owns the checkout. The widget sends the customer
    there instead of opening its own, and stands down on that path. It accepts
    `/checkout` and `/checkout/{cartId}`; a bare page gets the current cart ID
    appended on redirect.
  </Param>
  <Param name="cartSummaryUrl" optional type="string">
    Page on your site that owns the cart summary. Same behaviour as
    `checkoutUrl`.
  </Param>
  <Param name="disableUrls" optional type="string[]">
    Paths on which the widget stands down. Default `checkoutUrl` (without its
    cart ID) and `cartSummaryUrl`; an empty array keeps that default. Only the
    pathname is matched, case-insensitively. `*` matches inside one segment,
    `**` across segments. An entry without a wildcard also matches on a segment
    boundary, so `/checkout` covers `/checkout/success` but not
    `/checkout-foo`.
  </Param>
</Params>

<Example>

```html title="A full config object"
<script>
  window.subblyConfig = {
    apiKey: 'YOUR_STOREFRONT_API_KEY',
    languageCode: 'fr',
    settings: {
      interceptProductLinks: true,
      cartToggleEl: '.js-cart-toggle',
      cartCounterEl: '.js-cart-count'
    },
    checkoutUrl: '/checkout',
    disableUrls: ['/checkout', '/account/**']
  }
</script>
```

</Example>

</Method>

<Method id="settings" signature="subblyConfig.settings">

Page-integration settings. They tie the widget to the markup on your own page:
which links it catches, which element opens it, which element shows the item
count. Set them in `window.subblyConfig` before the script runs, or pass them
to `SubblyCart.initialize()`.

These are not the theme settings. Colours, typography and checkout behaviour
live in the shop's cart settings, which you override with
[`setSettings`](/reference/cart-widget/methods#set-settings).

<Params title="Keys">
  <Param name="interceptProductLinks" optional type="boolean">
    Catch clicks on Subbly buy links anywhere on the page, cancel the
    navigation, and open the widget instead. See
    [Sell from your own links](/developer-resources/cart-widget/wire-it-into-your-page#sell-from-your-own-links). Default `false`.

    Before the widget finishes loading, a stub handler cancels these clicks.
    It does not remember them, so a click that early is dropped.
  </Param>
  <Param name="cartButton" optional type="boolean">
    Show the widget's own floating cart button. Default `false`. The button is
    suppressed when the page already holds an `a.subbly-cart` element.
  </Param>
  <Param name="cartButtonImage" optional type="string">
    URL of an image for the floating cart button, in place of the built-in
    icon. It works only with `cartButton: true`. Default `null`; anything that
    is not a string is ignored.
  </Param>
  <Param name="cartToggleEl" optional type="string | HTMLElement">
    CSS selector or element that opens and closes the widget. The default click
    action is cancelled. Clicks are caught on `document`, so elements added
    later still work. Default `''`.
  </Param>
  <Param name="cartCounterEl" optional type="string | HTMLElement">
    CSS selector or element whose content the widget replaces with the number
    of active items. It updates on `CART_READY` and `CART_UPDATED`, and after a
    `popstate` event, where it waits up to 5 seconds for the element and then
    300 ms more before writing. Default `''`.

    The widget also listens for a `pushstate` event, but nothing fires one: its
    own patch of `history.pushState` dispatches `locationchange` instead. On a
    framework that routes with `pushState`, update the element yourself from
    `CART_UPDATED`.
  </Param>
  <Param name="localizationSettings" optional type="boolean">
    Show the currency and language picker in the widget header. Default
    `false`.
  </Param>
  <Param name="disableSummaryView" optional type="boolean">
    Hide the cart summary and use the checkout as the first view. Default
    `false`. The `?disableSummaryView=1` query parameter does the same.
  </Param>
  <Param name="hideBundleItems" optional type="boolean">
    Hide the products inside a bundle, in the summary and at the checkout.
    Default `false`. The `?hideBundleItems=1` query parameter does the same.
  </Param>
</Params>

<Example>

```html title="Configure the widget"
<script>
  window.subblyConfig = {
    apiKey: 'YOUR_STOREFRONT_API_KEY',
    settings: {
      interceptProductLinks: true,
      cartToggleEl: '.js-cart-toggle',
      cartCounterEl: '.js-cart-count',
      localizationSettings: true
    }
  }
</script>
```

</Example>

</Method>

<Method id="query-parameters" signature="?coupon=CODE">

Query parameters the widget reads from the page URL when it starts. They make
a plain link enough to drive the widget — a campaign link that applies a
coupon, a referral link, a translated landing page.

Four of them are used once and then remembered as used: `gift`, `coupon`, `r`
and `custom_setup_return_url`. A bank confirmation that sends the customer back
to the same URL does not apply them twice.

<Params title="Parameters">
  <Param name="lang" optional type="string">
    Language of the widget, when `languageCode` is not in the config. The
    widget takes the first two characters.
  </Param>
  <Param name="coupon" optional type="string">
    Coupon code to hold and apply once the cart fits it, as
    [`setPendingCoupon`](/reference/cart-widget/methods#set-pending-coupon)
    does. Used once.
  </Param>
  <Param name="gift" optional type="string">
    Any value opens the gift view. Used once.
  </Param>
  <Param name="r" optional type="string">
    ID of the referring customer. Used once.
  </Param>
  <Param name="email" optional type="string">
    Prefills the checkout email. `customerEmail` is a deprecated fallback.
  </Param>
  <Param name="firstName" optional type="string">
    Prefills the first name.
  </Param>
  <Param name="lastName" optional type="string">
    Prefills the last name.
  </Param>
  <Param name="marketingConsent" optional type="string">
    Prefills the marketing opt-in.
  </Param>
  <Param name="tosConsent" optional type="string">
    Prefills the terms checkbox.
  </Param>
  <Param name="customerExternalId" optional type="string">
    Your own ID for the customer. It is stored on the customer profile.
  </Param>
  <Param name="disableSummaryView" optional type="string">
    Any value hides the summary and uses the checkout as the first view.
  </Param>
  <Param name="hideBundleItems" optional type="string">
    Any value hides the products inside a bundle.
  </Param>
  <Param name="custom_success_url" optional type="string">
    URL of your own receipt page, in place of the widget's.
  </Param>
  <Param name="custom_setup_return_url" optional type="string">
    URL the customer returns to after a Stripe 3-D Secure check. Used once.
  </Param>
  <Param name="checkoutMode" optional type="string">
    `test` runs the checkout in test mode.
  </Param>
  <Param name="setup_intent" optional type="string">
    Set by Stripe on the return redirect. `payment_method_id` and
    `redirect_status` come with it.
  </Param>
</Params>

<Example>

```html title="A campaign link"
<a href="https://yourshop.com/boxes?coupon=WELCOME10&lang=fr">
  10% off your first box
</a>
```

</Example>

</Method>
