3. Embed in HTML

Embedded Widgets - insert in a HTML file

After creating your widget, you'll want to add it to your website. This can be done by embedding a few lines of HTML and JavaScript code into your site's source code.

Here's the code you'll need to add:

<script>
  var aisleFormConfig = {
    widgetId: "ID_OF_WIDGET_HERE",
  };
</script>
<script
  defer
  src="https://storage.googleapis.com/gotoaisle-assets-store/aisle-wfi/script/loader/bundleLoader.js"
  onload="window.aisleLoader.loadAssets(aisleFormConfig)"
></script>
<!-- Div below must exist on the webpage -->
<div id="aisle-form-display"></div>
ℹ️

Note Ensure that the <div id="aisle-form-display"></div> line is placed in the part of your webpage where you want your widget to appear.

Example HTML File

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <!-- other meta tags, CSS links, etc. -->
 
    <!-- Aise widget code in the header (you may choose to put this anywhere in your DOM) -->
    <script>
      var aisleFormConfig = {
        widgetId: "YOUR_WIDGET_ID_HERE",
      };
    </script>
    <script
      defer
      src="https://storage.googleapis.com/gotoaisle-assets-store/aisle-wfi/script/loader/bundleLoader.js"
      onload="window.aisleLoader.loadAssets(aisleFormConfig)"
    ></script>
  </head>
  <body>
    <!-- Header -->
    <header>
      <h1>Welcome to My Website</h1>
    </header>
 
    <!-- Main content -->
    <main>
      <p>This is where the main content of the webpage goes.</p>
 
      <!-- Ensure this div exists where you want the widget to appear -->
      <div id="aisle-form-display"></div>
    </main>
 
    <!-- Footer -->
    <footer>
      <p>Website Footer</p>
    </footer>
  </body>
</html>