Skip to main content

Get started with prebuilt widgets

To get started with the prebuilt widgets, integrate your distribution file and add the widgets library as a script in your framework. Then, you can embed the prebuilt widgets into your site by using the custom HTML elements.

  1. Before you begin
  2. Integrate your distribution file
  3. Reference the library
  4. Embed the widgets

Before you begin​

  • Ensure your framework supports JavaScript.
  • Review your framework documentation about importing JavaScript files.

Integrate your distribution file​

As a retailer, you are provided with a link to a unique distribution file when you sign up. Download the file and include it in your framework. Once downloaded, your distribution file can be included in your application as a library.

If you are having issues with the integration, contact the Enterprise Technical Support Team.

Reference the library​

Reference the library as a script in your framework. The library is exported as a Universal Module Definition.

<script async src="https://dboktu48tbzl9.cloudfront.net/retailer-name/evergreen/ic-widgets-v1.umd.js"></script>

Embed the widgets​

Use custom HTML elements in your page markup to embed the prebuilt widgets into your retailer site. For more information, see the Prebuilt widgets concept page.

Example​

The following example shows the referenced library and the <instacart-auth></instacart-auth> HTML element that adds the Auth and Profile widget:

<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <main>
      <h1>Example Markup</h1>
      <instacart-auth></instacart-auth>
    </main>
    <script
      async
      src="https://dboktu48tbzl9.cloudfront.net/retailer-name/evergreen/ic-widgets-v1.umd.js"
    ></script>
  </body>
</html>
Last updated on