Obtaining the Live View URL

Anchor Browser offers a live view feature that allows you to embed an interactive frame of a website as a web element.

Headful (Reommended)

Headful mode provides a single URL to view the full chrome view, including the address bar. This also ensurese the presented tab is always the active tab.

To create a browser in headful mode, set the headless parameter to false when creating a session.

{
  "headless": false
}

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>

Headless

To obtain the browser live session URL, start by creating a session

The session_url points to the browser default first page. If your browser proccess involves creating a new page, collect the corresponding URL by using the live view URLs endpoint.

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

<iframe src="https://anchorforge.io/devtools-frontend/inspector.html?wss={{session_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

Embed in Fullscreen View (Hide Navigation Bar)

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

<iframe src="https://anchorforge.io/devtools-frontend/inspector-fullscreen.html?wss={{session_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 ... style="... pointer-events: none;"></iframe>