@1password/save-button v1.3.0

Save in 1Password Button API

When 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 1Pasword, 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.

Step 1: 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.

1.1 Install the button

To get started, install the Save in 1Password button using your preferred package manager:

npm

npm install @1password/save-button --save-dev

Yarn

yarn add @1password/save-button -D

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

<script type="module">
	import "@1password/save-button/index.js";
</script>

1.2 Build a save request

The save request needs these values:

For example:

	{
	  "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."
	}

1.3 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 an optional lang attribute if you want to localize the button language, change the color of the button with an optional class attribute, or if your application has dark mode, activate dark mode in the Save in 1Password button with the optional data-theme attribute.

For example:

  <onepassword-save-button
	  data-onepassword-type="credit-card"
	  value="ewoJInRpdGxlIjogIkFDTUUgQ3JlZGl0IE...=="
	  lang="en"
	  class="black"
	  data-theme="dark">
  </onepassword-save-button>

If you're building a single-page app, dispatch a CustomEvent on the page with type OPButtonAdded to tell 1Password to enable the Save in 1Password button.

Step 2: Request to be added to the list of allowed sites

The Save in 1Password button only works on sites approved by 1Password. To request that your site be added to the list or for more information about the Save in 1Password button, contact the 1Password Partnerships team at support+partnerships@1password.com.

Appendix: Supported language codes