Getting Started

Prerequisites

• Having a Remarqr account.

Creating a project

To create a project, head to the project tab and create a new project. Enter the informations asked.

Install the library on your project’s website

First, install the library on your project

npm i remarqr

Initializing the Toolbar

The process for initializing the toolbar on your website will vary depending on your project’s architecture. Below are some examples to guide you. The core principle remains consistent:

1. Import the script: Incorporate the toolbar script within your main layout or on the specific page where the toolbar is intended to appear.
2. Create a Container: At the bottom of the body, establish a container <div /> where the toolbar will reside.
3. Invoke the Function: Once your document has fully loaded, call the renderRemarqr(container: HTMLDivElement) function within the designated container.

Svelte

In your +layout.svelte file:

<script lang="ts">
  import { renderRemarqr } from '@remarqr/toolbar';

  let container: HTMLDivElement;

  onMount(() => {
    if (browser && container) {
      renderRemarqr(container);
    }
  });
</script>

<slot />
<div bind:this={container}/>

React

Redacting.

Astro

Redacting.

HTML

Redacting.

To activate the toolbar, append the parameter ?remarqr=true to your URL. Upon doing so, a popup will prompt you to log in with your credentials or use your project’s access code: 000451.

Note

In a development environment, you may opt for guest mode to verify the toolbar’s functionality. Please note, in this mode, no data will be saved.

Finalizing the Toolbar Setup

Once your changes are published, the toolbar will automatically initialize on every page where the script is embedded. You have the flexibility to allow automatic initialization —ideal for staging environments— or to require the ?remarqr=true parameter. This behavior can be configured in your project’s settings.