Installation and Integration
Quickstart
To quickly integrate Capture Eye, include the following HTML:
Using <media-viewer>
<media-viewer>
The media-viewer
component within <capture-eye>
automatically detects the source file type (image or video) for display. You can replace <media-viewer>
with your preferred components, such as <img>
, <video>
, or any custom display element.
For a live demonstration, visit the interactive playground.
Component Attributes
layout
No
Layout style. Default is original
; other option: curated
.
visibility
No
Display behavior. Default is hover
to show on mouse hover; always
keeps it visible (defaults to always
on mobile).
position
No
Position of the widget. Default is top left
; options include top right
, bottom left
, and bottom right
.
color
No
Color of the widget. Default is #377dde
(blue); for mobile, #333333
(gray).
cz-title
No
Overrides the copyright zone title (default: Produced by
).
eng-img
No
Sets image(s) for the engagement banner. Use comma-separated URLs for rotation (e.g., eng-img="img1.png,img2.png"
).
eng-link
No
Sets link(s) for the engagement banner, paired with eng-img
. Use URL encoding to replace commas.
action-button-text
No
Customizes the action button text (default: View More
).
action-button-link
No
Sets the action button URL (default directs to Capture website).
Integration with Frontend Frameworks
Capture Eye integrates seamlessly with vanilla HTML as well as popular frontend frameworks. Below are examples for different environments:
Vanilla HTML
This method works seamlessly across most website projects, including frontend frameworks like Next.js (as a client-side component) and CMS platforms or no-code builders like WordPress or Webflow. Capture Eye can be integrated as long as the framework or builder supports custom HTML.
To add Capture Eye with vanilla HTML, import the component via CDN and place the <capture-eye>
tag in your HTML:
Using capture-eye@latest
in the CDN link ensures you’re always using the latest version, though updates may take up to 12 hours to propagate due to caching. For a stable version, specify a semantic version instead, e.g., [email protected]
.
React
In React, install the package:
Define the Capture Eye component using @lit/react
:
Then, use it in your JSX:
Angular
To use Capture Eye in Angular, first install:
Add the webcomponents loader to angular.json
:
Enable CUSTOM_ELEMENTS_SCHEMA
in your module:
Add Capture Eye in your component:
Vue
For Vue, import Capture Eye and use it in your template:
JavaScript Control Methods
The <capture-eye>
component provides methods to control its behavior programmatically:
isOpened
isOpened
Description: Checks if the modal is open.
Usage:
open()
open()
Description: Opens the modal.
Usage:
close()
close()
Description: Closes the modal.
Usage:
Style Customization
Capture Eye uses Shadow DOM for encapsulation but allows for customization via JavaScript. The example below demonstrates how to apply style customization if the customization option is not provided in the Capture Eye component attributes.
Customizing the Modal Background
Modify the modal’s background color:
Last updated