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:
Workflow overview
The following workflow describes the steps to implement a prebuilt widget:
- Integrate your distribution file to your application. This is provided when you sign up.
- Include the widgets library as a script in your application.
- 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:
| Widget | Custom HTML Element | Description |
|---|---|---|
| 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. |