🏷️ 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