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.

<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 

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 

<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 

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.

Content security policies

Drops are styled through inline stylesheets, loaded at runtime. This is necessary to achieve the shadow DOM architecture that keeps our styles from affecting your web page.

However, this approach can pose a problem for strict content security policies. To create a Drops-compatible CSP, you have two options, as laid out in the sections below.

1. Unsafe inline

The simplest solution is to relax your CSP by setting style-src 'unsafe-inline'.

This poses a minor security risk related to unknown external stylesheets. Discuss this option with your security team.

2. Stylesheet Nonce

The safer, but more complex option is a stylesheet nonce:

  1. Each time your web page loads, your server should generate a single-use nonce that can be used to mark stylesheets as safe.

  2. Insert the nonce into your CSP with style-src 'nonce-123abc...'.

  3. Before loading Moov Drops, call window.moovDropsNonce = "123abc...", and that nonce will be applied to all Drops style elements.

Nonces do not apply to style attributes. Moov Drops still requires dynamically set style attributes, which you can allow in your CSP with style-src-attr 'unsafe-inline'.
Summary Beta