Skip to main content

Prebuilt widgets

Prebuilt widgets are widgets designed and maintained by Instacart. Use prebuilt widgets to embed e-commerce capabilities to your site.

For example, you can add a Cart widget to your retailer site to seamlessly integrate a customer’s cart on your retailer site with your storefront site. Then, if a customer adds items to their cart on your retailer site and navigates to your storefront site, your storefront accurately shows the number of items in their cart.

The following list describes some use cases for prebuilt widgets:

  • Authenticate a user.
  • Display a user’s profile.
  • Display the number of items in a user’s cart.
  • Display the products in a collection.
  • Enable a user to search for products through a search bar.

The following image shows an example of a retailer site with prebuilt widgets:

Shows an example of a retailer site with the auth and profile, cart, collection, and search bar widgets

  1. Auth and Profile
  2. Cart
  3. Search bar
  4. Collection

Workflow overview

The following workflow describes the steps to implement a prebuilt widget:

  1. Integrate your distribution file to your application. This is provided when you sign up.
  2. Include the widgets library as a script in your application.
  3. Embed the prebuilt widget you wish to use.

For more information, see Get started with prebuilt widgets.

Custom HTML elements

The following table lists the prebuilt widgets and the custom HTML elements that you can use to embed the widgets into your retailer site:

WidgetCustom HTML ElementDescription
Auth and Profile<instacart-auth></instacart-auth>Enables customers to sign in to their account or register for an account. Once authenticated, the profile menu displays with additional profile options.
Cart<instacart-shopping-cart></instacart-shopping-cart>Displays the number of items in the cart. When customers click the cart widget, they’re navigated to your storefront site.
Collection<instacart-collection collection-id='<code>'></instacart-collection>Displays products in a collection. Customers can add these items to their cart.
Search bar<instacart-search></instacart-search>Displays a search bar for your customers to search for products. When customers enter a search query, they’re navigated to your storefront and shown the search results for their query.