Skip to content

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

AttributeRequiredDescription
nidYesUnique Nid of the asset.
layoutNoLayout style. Default is original; other option: curated.
visibilityNoDisplay behavior. Default is hover to show on mouse hover; always keeps it visible (defaults to always on mobile).
positionNoPosition of the widget. Default is top left; options include top right, bottom left, and bottom right.
colorNoColor of the widget and the modal’s primary color. Default is #377dde (blue); for mobile, #333333 (gray).
heading-sourceNoControl the heading source. Default is headline; options include headline and abstract.
cz-titleNoOverrides the copyright zone title (default: Produced by).
eng-imgNoSets image(s) for the engagement banner. Use comma-separated URLs for rotation (e.g., eng-img="img1.png,img2.png").
eng-linkNoSets link(s) for the engagement banner, paired with eng-img. Use URL encoding to replace commas.
action-button-textNoCustomizes the action button text (default: View More).
action-button-linkNoSets the action button URL (default directs to Capture website).
cr-pinNoControl the CR Pin behavior. Default is on; options include: on and off

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>