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

# Add the Save in 1Password button to your website

export const Small = ({children}) => {
  return <small>{children}</small>;
};

<CardGroup cols={2}>
  <div>
    <p>When you add the Save in 1Password button to your website, visitors can easily save their sign-in details, credit cards, or crypto wallets to their 1Password account in one step. If you set up an <a href="https://1password.com/partnerships">integration with 1Password</a>, the button can also be used to save API keys.</p>

    <p>The Save in 1Password button on your site communicates directly with 1Password in the browser, so no unencrypted information leaves the customer's browser.</p>
  </div>

  <div>
    <img src="https://mintcdn.com/ab-634991b8/9g9fZmRyYnb5i5sQ/static/img/save-in-1password-button.png?fit=max&auto=format&n=9g9fZmRyYnb5i5sQ&q=85&s=153aba1ecd62e8f674f94933d5b8fa79" alt="" width="352" data-path="static/img/save-in-1password-button.png" />
  </div>
</CardGroup>

## Add the button to your site

To add the button to your site, you'll need to install the Save in 1Password button, build a save request, and import the button into your file with the required attributes and values. The button is disabled by default. When the page loads, 1Password will check for the button and make it available to the user. Item URLs, if applicable, are determined by 1Password, so a login item can only be filled for the domain on which it was saved.

The button element specifies the type of item to create and the information it'll contain. The information is a Base64-encoded save request in JSON format.

### Install the button

To get started, install the [Save in 1Password button](https://www.npmjs.com/package/@1password/save-button) using your preferred package manager:

<CodeGroup groupId="package-manager">
  ```shell npm theme={null}
  npm install @1password/save-button --save-dev
  ```

  ```shell Yarn theme={null}
  yarn add @1password/save-button -D
  ```
</CodeGroup>

Then import the package into your HTML file. For example:

```html theme={null}
<script type="module">
    import "@1password/save-button/index.js";
</script>
```

### Build a save request

The save request needs these values:

| Field                                   | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| --------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`                                 | string | The suggested title for the item to be saved.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `fields`                                | array  | Each object in the array has these properties: <ul><li>`autocomplete` (string): The type of field to fill.</li><li>`value` (string): The value to be filled in the field  <br />Use the autocomplete field name and values defined in the Autofill section of the [HTML Living Standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). <br /><Small>The custom autocomplete fields for Crypto Wallet items are `crypto-address` for wallet address and `crypto-recovery-seed` for recovery phrase. <br /> The custom autocomplete fields for Login items are `one-time-code` for one-time password fields and `recovery-code` for an individual masked recovery code.</Small></li></ul> |
| `notes` <br /><Small>(optional)</Small> | string | Notes to save with the item. These can be formatted with Markdown.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

For example:

```javascript theme={null}
const saveRequest = {
	title: "ACME Credit Card",
	fields: [
		{
			autocomplete: "cc-name",
			value: "Wendy J. Appleseed",
		},
		{
			autocomplete: "cc-number",
			value: "4111111111111111",
		},
		{
			autocomplete: "cc-exp",
			value: "202512",
		},
		{
			autocomplete: "cc-csc",
			value: "123",
		},
		{
			autocomplete: "cc-type",
			value: "visa",
		},
		{
			autocomplete: "street-address",
			value: "512 Main Street",
		},
		{
			autocomplete: "address-level2",
			value: "Cambridge",
		},
		{
			autocomplete: "address-level1",
			value: "MA",
		},
		{
			autocomplete: "postal-code",
			value: "12345",
		},
		{
			autocomplete: "country",
			value: "US",
		},
	],
	notes: "Plain text. You can use [Markdown](https://support.1password.com/markdown/) too.",
};
```

To encode the example above to a Base64 string in JSON format, use the built-in `encodeOPSaveRequest` function:

```javascript theme={null}
const encodedSaveRequest = encodeOPSaveRequest(saveRequest);
```

Then copy and paste the resulting Base64-encoded string as the `value` attribute of the Save in 1Password button. For example:

```
"eyJ0aXRsZSI6IkFDTUUgQ3JlZGl0IENhcmQiLCJmaWVsZHMiOlt7ImF1dG9jb21wbGV0ZSI6ImNjLW5hbWUiL
CJ2YWx1ZSI6IldlbmR5IEouIEFwcGxlc2VlZCJ9LHsiYXV0b2NvbXBsZXRlIjoiY2MtbnVtYmVyIiwidmFsdW
UiOiI0MTExMTExMTExMTExMTExIn0seyJhdXRvY29tcGxldGUiOiJjYy1leHAiLCJ2YWx1ZSI6IjIwMjUxMiJ
9LHsiYXV0b2NvbXBsZXRlIjoiY2MtY3NjIiwidmFsdWUiOiIxMjMifSx7ImF1dG9jb21wbGV0ZSI6ImNjLXR5
cGUiLCJ2YWx1ZSI6InZpc2EifSx7ImF1dG9jb21wbGV0ZSI6InN0cmVldC1hZGRyZXNzIiwidmFsdWUiOiI1M
TIgTWFpbiBTdHJlZXQifSx7ImF1dG9jb21wbGV0ZSI6ImFkZHJlc3MtbGV2ZWwyIiwidmFsdWUiOiJDYW1icm
lkZ2UifSx7ImF1dG9jb21wbGV0ZSI6ImFkZHJlc3MtbGV2ZWwxIiwidmFsdWUiOiJNQSJ9LHsiYXV0b2NvbXB
sZXRlIjoicG9zdGFsLWNvZGUiLCJ2YWx1ZSI6IjEyMzQ1In0seyJhdXRvY29tcGxldGUiOiJjb3VudHJ5Iiwi
dmFsdWUiOiJVUyJ9XSwibm90ZXMiOiJQbGFpbiB0ZXh0LiBZb3UgY2FuIHVzZSBbTWFya2Rvd25dKGh0dHBzO
i8vc3VwcG9ydC4xcGFzc3dvcmQuY29tL21hcmtkb3duLykgdG9vLiJ9"
```

Or update the Base64-encoded value of the button:

```javascript theme={null}
document
    .querySelector("onepassword-save-button")
    .shadowRoot.querySelector("button[data-onepassword-save-button]")
    .setAttribute("value", encodedSaveRequest);
```

### Add the button to your page

Add the Save in 1Password button to your page with the two required attributes: `data-onepassword-type` and `value`.

You can also add optional attributes to change the button language, color, theme, or padding: `lang`, `class`, `data-theme`, or `padding`.

| Attribute                                    | Value                                                                                                                                                                                                                                                                                                                                                                            |
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-onepassword-type`                      | The type of item the button will create: `credit-card`, `login`, or `crypto-wallet`.                                                                                                                                                                                                                                                                                             |
| `value`                                      | The Base64-encoded [save request](#build-a-save-request).                                                                                                                                                                                                                                                                                                                        |
| `lang` <br /><Small>(optional)</Small>       | The language code for [one of the supported languages](#appendix-supported-language-codes). <br /><Small>If no language attribute is provided, the package will determine the browser language using the [NavigatorLanguage Web API](https://www.science.co.il/language/Locale-codes.php). If the browser language isn't supported, the package will default to English.</Small> |
| `class` <br /><Small>(optional)</Small>      | The color of the button: `black` or `white`.<br /><Small> If no class attribute is provided, the button color will default to blue.</Small>                                                                                                                                                                                                                                      |
| `data-theme` <br /><Small>(optional)</Small> | The optimized button theme for a website with a light or dark background: `light` or `dark`.<br /><Small>If no data-theme attribute is provided, the button will default to the light theme.</Small>                                                                                                                                                                             |
| `padding` <br /><Small>(optional)</Small>    | The button padding: `normal` or `compact` or `none`. <br /><Small>If no value is provided, or if the value is `normal`, the button padding will default to 24 pixels. If the value is `compact`, the padding will be 16 pixels. If the value is `none`, the padding will be 0 pixels.</Small>                                                                                    |

For example:

```html theme={null}
<onepassword-save-button
        data-onepassword-type="credit-card"
        value="eyJ0aXRsZSI6IkFDTUUgQ3JlZGl0IENhcm...=="
        lang="en"
        class="black"
        data-theme="dark"
        padding="normal">
</onepassword-save-button>
```

If you're building a single-page app, you may need to call the `activateOPButton()` function to activate the button. This will dispatch a custom event on the page to tell 1Password to enable the Save in 1Password button.

## Appendix: Supported language codes

| Language             | Code    | Language   | Code |
| -------------------- | ------- | ---------- | ---- |
| English              | `en`    | Japanese   | `ja` |
| French               | `fr`    | Korean     | `ko` |
| German               | `de`    | Portuguese | `pt` |
| Italian              | `it`    | Russian    | `ru` |
| Chinese, simplified  | `zh-CN` | Spanish    | `es` |
| Chinese, traditional | `zh-TW` |            |      |