SDKs overview

Marker.io primarily functions as a client-side tool for capturing visual feedback and bug reports directly from web pages [Marker.io documentation on core functionality]. Its core functionality is delivered through a JavaScript widget that can be embedded into web applications. This widget enables users to take screenshots, annotate them, and submit reports directly to integrated project management tools. While Marker.io emphasizes browser extensions and direct integrations, developers can interact with the Marker.io widget programmatically on their websites.

The SDKs and libraries detailed here focus on facilitating the integration and customization of the Marker.io widget within a web application's codebase. This allows for controlled initialization, user identification, and event handling related to feedback submission. The primary method of integration is via a JavaScript snippet or a dedicated npm package for web environments. The emphasis is on client-side interaction rather than extensive server-side API access, aligning with its role as a front-end feedback collection tool.

Official SDKs by language

Marker.io offers a primary official SDK designed for web-based applications, distributed as a JavaScript library. This SDK allows developers to embed and configure the Marker.io feedback widget directly within their web projects. It is designed to be framework-agnostic, suitable for use with vanilla JavaScript, or frameworks such as React, Angular, and Vue.js.

Language/Environment Package/Method Installation Command Maturity
JavaScript (Web) @marker.io/browser npm install @marker.io/browser or script tag Stable

The @marker.io/browser package is the official and recommended way to integrate Marker.io into modern JavaScript projects, providing type definitions and a modular structure. For simpler integrations or environments where npm is not preferred, a direct script tag embed is also supported, loading the library from a Content Delivery Network (CDN) [Marker.io JavaScript SDK installation guide].

Installation

Installing the Marker.io JavaScript SDK typically involves either using a package manager like npm or yarn, or by embedding a script tag directly into your HTML. Both methods achieve the same goal of making the Marker.io widget available on your web page.

Using npm (recommended for modern web projects)

For projects managed with npm or yarn, the @marker.io/browser package can be added as a dependency:

npm install @marker.io/browser
# or
yarn add @marker.io/browser

Once installed, you can import and initialize the SDK in your application's main JavaScript file:

import { init as initMarkerSDK } from '@marker.io/browser';

// Initialize the SDK with your destination ID
// Replace 'YOUR_DESTINATION_ID' with the actual ID from your Marker.io project settings
initMarkerSDK({ destination: 'YOUR_DESTINATION_ID' });

The destination ID links the widget to your specific Marker.io project, ensuring feedback is routed correctly [Marker.io documentation on destination ID].

Using a script tag (for simpler setups or non-module environments)

Alternatively, you can embed the Marker.io SDK directly into your HTML file by adding a <script> tag. This method does not require a build step or package manager.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Application</title>
</head>
<body>
  <!-- Your application content -->

  <script>
    // Marker.io SDK initialization script
    (function() {
      var markerSDK = window.markerSDK || {};
      markerSDK.load = function(destinationId) {
        var script = document.createElement('script');
        script.src = 'https://portal.marker.io/loader.js';
        script.onload = function() {
          window.markerSDK.init({
            destination: destinationId
          });
        };
        document.head.appendChild(script);
      };

      // Replace 'YOUR_DESTINATION_ID' with your actual Marker.io project destination ID
      markerSDK.load('YOUR_DESTINATION_ID');
    })();
  </script>
</body>
</html>

This script tag approach loads the Marker.io loader, which then initializes the widget with the specified destination ID. This method is often preferred for rapid prototyping or websites with less complex build processes.

Quickstart example

This quickstart example demonstrates how to integrate the Marker.io JavaScript SDK into a simple web page to enable visual feedback collection. It covers basic initialization and a common customization: identifying the user.

Basic integration and user identification

The following example uses the npm-based installation method, which is common in modern web development. Ensure you have installed @marker.io/browser as described in the installation section.

// main.js or app.js

import { init as initMarkerSDK } from '@marker.io/browser';

// Replace with your actual Marker.io destination ID
const MARKER_IO_DESTINATION_ID = 'YOUR_DESTINATION_ID';

async function initializeMarkerIo() {
  try {
    const markerSDK = await initMarkerSDK({
      destination: MARKER_IO_DESTINATION_ID,
      // Optional: Configure advanced settings here
      // For example, to identify the current user:
      reporter: {
        fullName: 'John Doe',
        email: '[email protected]',
        id: 'user-12345'
      },
      // Other configurations like default fields, custom data, etc.
      // For a full list of configuration options, refer to the official documentation:
      // https://docs.marker.io/article/12-javascript-sdk-configuration
    });

    // You can interact with the markerSDK instance here if needed
    // For example, to programmatically open the widget:
    // markerSDK.showWidget();

    console.log('Marker.io SDK initialized successfully.');
  } catch (error) {
    console.error('Failed to initialize Marker.io SDK:', error);
  }
}

// Call the initialization function when your application starts
initializeMarkerIo();

// Example of attaching a custom trigger to open Marker.io
document.addEventListener('DOMContentLoaded', () => {
  const feedbackButton = document.getElementById('feedback-button');
  if (feedbackButton) {
    feedbackButton.addEventListener('click', async () => {
      const markerSDK = await initMarkerSDK({ destination: MARKER_IO_DESTINATION_ID });
      markerSDK.showWidget();
    });
  }
});

And the corresponding HTML (e.g., index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marker.io Quickstart</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    button { padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 4px; }
    button:hover { background-color: #0056b3; }
  </style>
</head>
<body>
  <h1>Welcome to the Marker.io Quickstart Page</h1>
  <p>This page demonstrates basic integration of the Marker.io SDK.</p>
  <button id="feedback-button">Give Feedback</button>

  <!-- Assuming your main.js is bundled or directly loaded -->
  <script type="module" src="./main.js"></script>
</body>
</html>

In this example, the reporter object is passed during initialization to automatically pre-fill reporter information when a user submits feedback. This helps streamline the reporting process and provides valuable context for bug tracking [Marker.io SDK reporter object configuration]. The optional button demonstrates how to programmatically trigger the Marker.io widget, rather than relying solely on the default widget button.

Community libraries

As Marker.io's primary integration method is a client-side JavaScript SDK, the ecosystem of community-contributed libraries is less extensive compared to APIs with broad server-side or multi-language SDKs. However, due to its compatibility with standard web technologies, developers often integrate Marker.io into various JavaScript frameworks without needing dedicated community libraries.

The official @marker.io/browser SDK is designed to be framework-agnostic, meaning it can be used directly within popular front-end frameworks like React, Vue, and Angular. For instance, integrating Marker.io into a React application typically involves importing and initializing the SDK within a React component's useEffect hook, ensuring it runs once after the component mounts. This approach leverages the official SDK directly rather than requiring a separate community wrapper.

While specific, widely-adopted community-maintained SDKs for Marker.io are not prominently documented by Marker.io itself, the flexibility of the JavaScript SDK allows for custom integrations within any web environment [Mozilla documentation on JavaScript modules]. Developers often create their own small utility wrappers or hooks to manage the SDK's lifecycle within their specific application architecture, which are typically internal to their projects rather than published as public libraries.

For developers looking to integrate Marker.io into specific frameworks or build systems, referring to the official JavaScript SDK documentation for configuration options and lifecycle events is the recommended approach, as it covers the core functionality needed for most use cases.