Skip to main content

Add the Save in 1Password button to your website

When you add the Save in 1Password button to your website, visitors can easily save their sign-in details, credit cards, addresses, or crypto wallets to their 1Password account with a click. If you set up an integration with 1Password, the button can also be used to save API keys.

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

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 using your preferred package manager:

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

Build a save request

The save request needs these values:

FieldTypeDescription
titlestringThe suggested title for the item to be saved.
fieldsarrayEach object in the array has these properties:
  • autocomplete (string): The type of field to fill.
  • value (string): The value to be filled in the field
    Use the autocomplete field name and values defined in the Autofill section of the HTML Living Standard.
    The custom autocomplete fields for Crypto Wallet items are crypto-address for wallet address and crypto-recovery-seed for recovery phrase.
    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.
notes
(optional)
stringNotes to save with the item. These can be formatted with Markdown.

For example:

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

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

Or update the Base64-encoded value of the button:

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.

AttributeValue
data-onepassword-typeThe type of item the button will create: credit-card, identity, login, or crypto-wallet.
valueThe Base64-encoded save request.
lang
(optional)
The language code for one of the supported languages.
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.
class
(optional)
The color of the button: black or white.
If no class attribute is provided, the button color will default to blue.
data-theme
(optional)
The optimized button theme for a website with a light or dark background: light or dark.
If no data-theme attribute is provided, the button will default to the light theme.
padding
(optional)
The button padding: normal or compact or none.
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.

For example:

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.

If you would like to participate in future co-marketing activities, be contacted for case studies, or be featured in 1Password's materials once you've implemented Save in 1Password, please send the link to your implementation and any relevant screenshots to our partnerships team.

Get help

For questions or support related to implementing the Save in 1Password button, contact the 1Password Partnerships team.

Appendix: Supported language codes

LanguageCodeLanguageCodeLanguageCode
EnglishenJapanesejaSpanishes
FrenchfrKoreankoChinese, simplifiedzh-CN
GermandePortugueseptChinese, traditionalzh-TW
ItalianitRussianru

Was this page helpful?