First of all, thank you for your purchase! We are thrilled to have you using our components. Depending on your purchase, you have likely received either a set of 4 JavaScript files (for the web component version) or a unique URL (for the Framer component version).
You can check our available components here: → portfolio
This guide covers how to integrate these into any project, balancing ease of use with performance.
1. Simple Integration (Bundled)
Best for: Rapid prototyping, CMS platforms (WordPress, Webflow), or standalone use. These files include the core framework inside, so they work out of the box.
Option A: Standard Bundle
(component_name.bundle.js)
Includes descriptive comments and is easier to debug. If you prefer to verify the logic yourself or use your own minifier (like Terser or UglifyJS) for security or transparency, use this version.
Option B: Minified Bundle
(component_name.bundle.min.js)
Recommended for production. Heavily optimized for file size by removing comments and whitespace.
How to use: Place the script tag in your <head> or before the closing
</body> tag. Of course component_name and component-tag-name need to be
replaced by the component name you are using or is shown in each component
documentation.
<script src="path/to/component_name.bundle.min.js"></script>
<component-tag-name prop="value"></component-tag-name>
2. Performance Optimized (ES Modules)
Best for: Projects using multiple EzComponents or modern web apps. These are lighter because they import the framework from a central CDN.
Option A: ESM Build
(component_name.esm.js)
Option B: Minified ESM Build
(component_name.esm.min.js)
⚠️ Important Note on Internet Access: Because the ESM versions import the framework from a remote CDN, the user needs an active internet connection. These files will not function in a strictly offline local environment or a “Localhost” setup without internet access.
How to use: You must set type="module" on the script tag.
<script type="module" src="path/to/component_name.esm.min.js"></script>
<component-tag-name prop="value"></component-tag-name>
3. Framer Integration
If you bought the Framer version, you don’t need to handle files.
- Copy the provided Component URL.
- Open your Framer project.
- Paste (Cmd/Ctrl + V) the URL directly onto the canvas.
- Framer will auto-import the component and expose the controls in the sidebar.
Choosing the right version
| File Extension | Use Case | Requirements |
|---|---|---|
.bundle.min.js | Plug-and-play, no setup required. | Works Offline |
.esm.min.js | High performance for multiple components. | Internet Req. |
Note: If you don’t trust our minified code or want to ensure 100% transparency, feel free to use the non-minified versions and run your own minification process.
