![\"Save](\"https://i.1password.com/media/buttons-and-icons/save-in-1password-button.png\"){kind=icon}
\n\nWhen you add the Save in 1Password button to your website, visitors can easily save their sign-in details, credit cards, or addresses to their 1Password account with a click. If you set up an [integration with 1Password](https://1password.com/partnerships/), the button can also be used to save API keys.\n\nThe Save in 1Password button on your site communicates directly with 1Password in the browser, so no unencrypted information leaves the customer's browser.\n\n## Step 1: Add the button to your site\n\nTo 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.\n\nThe 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.\n\n### 1.1 Install the button\n\nTo get started, install the [Save in 1Password button](https://www.npmjs.com/package/@1password/save-button) using your preferred package manager:\n\n#### npm\n\n```bash\nnpm install @1password/save-button --save-dev\n```\n\n#### Yarn\n\n```bash\nyarn add @1password/save-button -D\n```\n\nThen import the package into your HTML file. For example:\n\n```html\n\n```\n\n### 1.2 Build a save request\n\nThe save request needs these values:\n\n| Field | Type | Description | \n\t
|---|---|---|
title | string | \tThe suggested title for the item to be saved. | \n\t
fields | array | Each object in the array has these properties:\n\t\t
Use the autocomplete field name and values defined in the \"Autofill\" section of the HTML Living Standard. \n\t\t | \n\t
notes (optional) | string | Notes to save with the item. These can be formatted with Markdown. | \n\t
| Attribute | Value | \n\t
|---|---|
data-onepassword-type | The type of item the button will create: \n\t\t credit-card, api-key, or login | \n\t
value | \tThe Base64-encoded save request. | \n\t
lang (optional) | The language code for one of the supported languages.\n\t\t If no language attribute is provided, the package will determine the browser language using the NavigatorLanguage Web API. If the browser language isn’t supported, the package will default to English. | \n\t
class (optional) | The color of the button: \n\t\t black or white \n\t\tIf no class attribute is provided, the button color will default to blue. | \n\t
data-theme (optional) | The optimized button theme for a website with a light or dark background: \n\t\t light or dark\n\t\tIf no theme is provided the package will default to the light theme. | \n\t
padding (optional) | Controls the padding of the button: \n\t\t normal or compact or none \n\t\tIf no value is provided or a value of | \n\t