Ask Moov Beta
Generative AI is experimental and can make mistakes.
Guides Use cases API Changelog
  1. Moov.js
  2. Moov Drops

Drops 101

Learn the basics of Moov Drops

Moov Drops are custom web components added to your page the same way you would add any HTML tag. Moov Drops are defined in the Moov.js package. After initializing Moov.js, you will have access to our full library of Drops.

1
2
3
4
5
6
7
8

<html>
  <head>
    <script src="https://js.moov.io/v1"></script>
  </head>
  <body>
    <moov-example-drop></moov-example-drop>
  </body>
</html>
Moov Drops require a secure HTTPS connection. If you don’t have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

Properties

You can configure a Drop via properties set through JavaScript. Properties can be accessed using a reference to the Drop’s HTML element (<moov-example-drop> in this case).

How to set a property 

1
2

const exampleDrop = document.querySelector('moov-example-drop');
exampleDrop.exampleProperty = 'example-value';

Attributes

For your convenience, string-type properties can be set directly on the HTML element through a corresponding attribute. Properties are written in camelCase, while attributes are written in kebab-case.

How to set an attribute 

1
2
3

<moov-example-drop
  example-property="example-value"
></moov-example-drop>
Attribute changes will always update the corresponding property.
However, for performance reasons, property changes will not update the corresponding attribute.

Methods

Some Drops expose functional properties called methods. You can call these methods to perform some action.

How to call a method 

1
2

const exampleDrop = document.querySelector('moov-example-drop');
exampleDrop.exampleMethod('example-argument');

Themes

You can customize the look and feel of Moov Drops by editing our pre-defined CSS variables. Read our themes guide to learn more.

Summary Beta