Installation and Integration

Quickstart

To quickly integrate Capture Eye, include the following HTML:

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye@latest/dist/capture-eye.bundled.js"
  ></script>
</head>
<body>
  <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
    <media-viewer
      width="600px"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    ></media-viewer>
  </capture-eye>
</body>

Using <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

Attribute
Required
Description

nid

Yes

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 and the modal’s primary color. 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:

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye@latest/dist/capture-eye.bundled.js"
  ></script>
</head>
<body>
  <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
    <img
      width="600px"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    />
  </capture-eye>
</body>

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:

npm install @numbersprotocol/capture-eye @lit/react

Define the Capture Eye component using @lit/react:

import React from 'react';
import { createComponent } from '@lit/react';
import { CaptureEye } from '@numbersprotocol/capture-eye';

const CaptureEyeComponent = createComponent({
  tagName: 'capture-eye',
  elementClass: CaptureEye,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

Then, use it in your JSX:

<CaptureEyeComponent nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
  <img src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy" />
</CaptureEyeComponent>

Angular

To use Capture Eye in Angular, first install:

npm install @numbersprotocol/capture-eye @webcomponents/webcomponentsjs

Add the webcomponents loader to angular.json:

"scripts": [
  "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
]

Enable CUSTOM_ELEMENTS_SCHEMA in your module:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Add Capture Eye in your component:

<capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
  <img width="600px" src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy" />
</capture-eye>

Vue

For Vue, import Capture Eye and use it in your template:

<script setup>
import '@numbersprotocol/capture-eye';
</script>

<template>
  <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
    <img
      width="600"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    />
  </capture-eye>
</template>

JavaScript Control Methods

The <capture-eye> component provides methods to control its behavior programmatically:

isOpened

Description: Checks if the modal is open.

Usage:

const captureEye = document.querySelector('capture-eye');
console.log(captureEye.isOpened);

open()

Description: Opens the modal.

Usage:

captureEye.open();

close()

Description: Closes the modal.

Usage:

captureEye.close();

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:

<script>
  function updateModalStyle(captureEyeModal) {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`
      .modal-container {
        background-color: honeydew;
      }
    `);
    captureEyeModal.shadowRoot.adoptedStyleSheets.push(sheet);
  }
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
            if (node.nodeName.toLowerCase() === 'capture-eye-modal') {
              updateModalStyle(node);
            }
        }
      });
    });
  });
  observer.observe(document.body, { childList: true });
</script>
PreviousCapture EyeNextCapture SDK

Last updated