🏷️ Available on: Free and Pro · ⚙️ Find it in: Dashboard > Tools · ⏱️ Time: 5 minutes
Clipify Elements is a small, framework-neutral module that defines the Clip Player and Clip Gallery elements. Your website does not need React, HeroUI, or another UI dependency.
Important: Load the Clipify module once per page. You can reuse it for any number of Player and Gallery elements.
Load the module once
Add this script once on the page, preferably near the end of <body>:
<script type="module" src="https://clipify.us/elements/v1/clipify.js"></script>
You can then place any number of elements on the same page:
<clipify-gallery gallery-id="YOUR_GALLERY_ID"></clipify-gallery>
<clipify-player player-id="YOUR_PLAYER_ID"></clipify-player>
Find IDs and ready-to-copy snippets under Dashboard > Tools.
Player attributes
The Clip Player supports muted, autoplay, show-banner, and show-overlay. Boolean attributes are enabled when present.
<clipify-player player-id="YOUR_PLAYER_ID" muted autoplay></clipify-player>
React, Vue, and Svelte
Load the module once in the browser, then render the custom element in your template. In React, use lowercase custom-element attributes exactly as shown. In Vue and Svelte, use the same HTML syntax in the component markup. Avoid importing Clipify as a React package because it is delivered as a browser module.
Website builders
Use a Custom HTML, Embed Code, or Code Block feature that permits module scripts and custom elements. If the builder strips scripts, add the module in its site-wide header or footer settings and keep only the element in the page block.
Content Security Policy
Restrictive sites must allow the Clipify module and frames from https://clipify.us. Update script-src, frame-src, and any applicable connection policy. Keep the policy as narrow as your platform supports.
Troubleshooting
| Problem | Likely cause | Solution |
|---|---|---|
| Element remains empty | Wrong ID or unpublished resource | Copy the ID again and publish the selected resource |
| Browser blocks the module | Content Security Policy | Allow https://clipify.us in the applicable script and frame policies |
| Gallery opens inside a small area | Gallery was installed as an iframe | Install <clipify-gallery> instead |
| Module appears more than once | Snippet was copied into several blocks | Keep one module script and reuse the custom elements |
Related articles
- Which Clipify Website Feature Should You Use?
- How to Create and Embed a Twitch Clip Gallery
- Embedding Overlays
Next step: Get your installation snippet