Create a project

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

2. Install the library on your project’s website First, install the library on your project

   npm i remarqr

3. 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. 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.

4. 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.