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

# Account widget

> Let customers link retailer accounts from the Rivo account widget.

Add a **Linked Accounts** section to your Rivo account widget so signed-in customers can connect, sign back in to, or disconnect their retailer accounts without leaving the widget. Pair it with [Rewarding linked accounts](https://docs.subtotal.com/docs/integrations/rivo/linked-account.md) to award points when they do.

> [!NOTE]
>
> The section is served by the Subtotal Connect app, so [install it on your store](https://docs.subtotal.com/docs/widgets/shopify.md) first.

## Add the section

**1. Open Rivo's JavaScript settings**

In your Shopify admin, open Rivo and go to your account widget settings. Near the bottom of the page, find **Javascript Settings for Developers**.

**2. Paste the script**

Paste this line into **Onload Javascript**, then save:

```js theme={null}
document.head.appendChild(Object.assign(document.createElement('script'), { src: '/apps/subtotal/rivo-embed-v2.js' }));
```

**3. Check your storefront**

Sign in to your store as a customer and open the account widget. Linked Accounts appears below the welcome section.

The section only shows to signed-in customers. If you've turned on **Global visibility** in the Subtotal Connect app's **Visibility & Testing** settings, it also only shows to customers on that allow list.

> [!WARNING]
>
> Copy the code as-is. A line break inside quoted text stops the whole account widget from loading, so if the widget breaks after you save, check for one.

## Change the text

The section's heading is "Linked Accounts", and the description is "Connect your accounts to earn points when you shop in-store." To use your own, add `heading` and `description` to the script address:

```js theme={null}
document.head.appendChild(Object.assign(document.createElement('script'), {
  src: '/apps/subtotal/rivo-embed-v2.js' +
    '?heading=' + encodeURIComponent('Your linked stores') +
    '&description=' + encodeURIComponent('Earn points every time you shop in-store.'),
}));
```

## Customize the style

The section uses your widget's font with neutral styling: white cards with black and gray buttons. To match your brand, add a style block below the script in **Onload Javascript**. Your rules replace the defaults when they use the same selectors, so start each one with `.rivo-rc-injected` to keep it to this section.

This example gives the cards an outline and makes the buttons navy pills:

```js theme={null}
document.head.appendChild(Object.assign(document.createElement('style'), {
  textContent: [
    '.rivo-rc-injected .rivo-rc-card { border: 1px solid #1B3153; border-radius: 18px; }',
    '.rivo-rc-injected .rivo-rc-btn { border-radius: 999px; padding: 10px 16px; }',
    '.rivo-rc-injected .rivo-rc-btn--primary { background: #1B3153; color: #fff; }',
    '.rivo-rc-injected .rivo-rc-btn--primary:hover:not(:disabled) { background: #2A4670; }',
    '.rivo-rc-injected .rivo-rc-btn--secondary { background: transparent; border: 1px solid #1B3153; color: #1B3153; }',
  ].join('\n'),
}));
```

### Selectors

| Selector | What it styles |
| - | - |
| `.rivo-rc-injected` | The whole section |
| `.rivo-rc-injected .rivo-aw-title` | Heading, which starts with your widget's title style |
| `.rivo-rc-injected .rivo-rc-sub` | Description |
| `.rivo-rc-injected .rivo-rc-grid` | The list of retailers |
| `.rivo-rc-injected .rivo-rc-card` | One retailer, with `.is-connected` added once it's linked |
| `.rivo-rc-injected .rivo-rc-logo` | Retailer logo |
| `.rivo-rc-injected .rivo-rc-name` | Retailer name |
| `.rivo-rc-injected .rivo-rc-status` | Status text. Linked accounts add `.rivo-rc-status--active`, and accounts that need the customer to sign in again add `.rivo-rc-status--warn` |
| `.rivo-rc-injected .rivo-rc-btn` | All buttons |
| `.rivo-rc-injected .rivo-rc-btn--primary` | **Connect** button |
| `.rivo-rc-injected .rivo-rc-btn--secondary` | **Sign in** and **Disconnect** buttons |

To restyle a button's hover color, target `:hover:not(:disabled)` as in the example above. The default hover rules are more specific than a plain button selector.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.