Embedded Browser Live UI

Overview

Anchor Browser offers a live view feature that allows you to embed an interactive frame of a website as a web element. The live_view_url is received when creating a session.

Headful Mode (Default)

Headful mode provides a single URL to view the full chrome view, including the address bar. This ensures the presented tab is always the active tab and provides the best user experience.

To create a browser in headful mode, create a session with browser.headless.active set to false (the default):

import  AnchorBrowser from 'anchorbrowser';

// Initialize the client
const client = new AnchorBrowser({ apiKey: process.env.ANCHOR_API_KEY });

// For explicit headfull session configuration (optional, default to false)
const config = {
  browser: {
    headless: {
      active: false
    }
  }
};

const session = await client.sessions.create(config);
const liveViewUrl = session.data.live_view_url;
console.log(`Live view URL: ${liveViewUrl}`);

from anchorbrowser import Anchorbrowser
import os

# Initialize the client
client = Anchorbrowser(api_key=os.getenv("ANCHOR_API_KEY"))

# For explicit headfull session configuration (optional, default to False)
config = {
    "headless": {
      "active": False
    }
}

session = client.sessions.create(browser=config)
print(f"Live view URL: {session.data.live_view_url}")

Then, use the live_view_url from the response to embed the live view directly into an iframe:

<iframe 
  src="{{live_view_url}}" 
  sandbox="allow-same-origin allow-scripts" 
  allow="clipboard-read; clipboard-write" 
  style="border: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
</iframe>

Advanced Embedding Configuration

To use the fullscreen view, replace the live view URL with the following:

<iframe src="{{live_view_url}}" ...></iframe>

Disable Browser Interactivity

To prevent the end user from interacting with the browser, add the style="pointer-events: none;" attribute to the iframe:

<iframe 
  src="{{live_view_url}}" 
  sandbox="allow-same-origin allow-scripts" 
  allow="clipboard-read; clipboard-write" 
  style="border: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; pointer-events: none;">
</iframe>

This feature is available for both headful and headless modes.

Single-Use Live View URL

To generate a live view URL that can only be used once, set one_time_url to true. After the first viewer connects and disconnects, the URL becomes permanently invalid.

import AnchorBrowser from 'anchorbrowser';

const client = new AnchorBrowser({ apiKey: process.env.ANCHOR_API_KEY });

const session = await client.sessions.create({
  session: {
    live_view: {
      one_time_url: true
    }
  }
});

const liveViewUrl = session.data.live_view_url;
console.log(`Single-use live view URL: ${liveViewUrl}`);

from anchorbrowser import Anchorbrowser
import os

client = Anchorbrowser(api_key=os.getenv("ANCHOR_API_KEY"))

session = client.sessions.create(
    session={
        "live_view": {
            "one_time_url": True
        }
    }
)

print(f"Single-use live view URL: {session.data.live_view_url}")

one_time_url requires a headful browser. It cannot be used with headless mode.

Headless Mode

To obtain the browser live session URL in headless mode, start by creating a session:

import  AnchorBrowser from 'anchorbrowser';

// Initialize the client
const client = new AnchorBrowser({ apiKey: process.env.ANCHOR_API_KEY });

const config = {
  browser: {
    headless: {
      active: true
    }
  }
};

const session = await client.sessions.create(config);
const liveViewUrl = session.data.live_view_url;
console.log(`Live view URL: ${liveViewUrl}`);

from anchorbrowser import Anchorbrowser
import os

# Initialize the client
client = Anchorbrowser(api_key=os.getenv("ANCHOR_API_KEY"))

config = {
    "headless": {
      "active": True
    }
}

session = client.sessions.create(browser=config)
print(f"Live view URL: {session.data.live_view_url}")

The live_view_url currently points to the browser default first page.

Then, use the create-session response to embed the live view URL directly into an iframe:

<iframe src="{{live_view_url}}" sandbox="allow-same-origin allow-scripts" allow="clipboard-read; clipboard-write" style="border: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></iframe>

Introduction

Platform

Integrations

Account

Overview

Headful Mode (Default)

Advanced Embedding Configuration

Embed in Fullscreen View (Hide Navigation Bar)

Disable Browser Interactivity

Single-Use Live View URL

Headless Mode

​Overview

​Headful Mode (Default)

​Advanced Embedding Configuration

​Embed in Fullscreen View (Hide Navigation Bar)

​Disable Browser Interactivity

​Single-Use Live View URL

​Headless Mode

Overview

Headful Mode (Default)

Advanced Embedding Configuration

Embed in Fullscreen View (Hide Navigation Bar)

Disable Browser Interactivity

Single-Use Live View URL

Headless Mode