How to use clarity-visualize

[huidou886]

1、How to Play Data: When using visualizer.html(), playback is choppy.
2、How to Display Hotspots.
3、How to Display Click Areas.
4、Is the code available on the open-source website "https://clarity.microsoft.com/"?
Thank you

[huidou886]

During the private deployment process, the code for echo is as follows. Discovering that it cannot be perfectly replayed, how to modify it？

<template>
  <div class="sdk-wrap" ref="sdkWrap">
    <iframe class="sdk-wrap-iframe" ref="sdkWrapIframe"></iframe>
  </div>
</template>

<script setup>
import { onMounted, ref} from 'vue'
import { clarityData2 } from '../../utils/data';
import { Visualizer } from '../../utils/clarity.visualize'
const sdkWrap = ref(null);
const sdkWrapIframe = ref(null);

onMounted(() => {
  if (sdkWrapIframe.value) {
    init();
  }
})

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const init = async() => {
  const playbackData = [];
  const clarityDataTemp2 = clarityData2()
  const clarityDataTemp = clarityDataTemp2.split('\n')
  for (const iterator of clarityDataTemp) {
    try {
      if (iterator && iterator.length > 1) {
        const item = JSON.parse(decodeURIComponent(iterator))
        playbackData.push(item)
      }
    } catch (e) {
      console.error('e------>', e)
    }
  }
  const visualizer = new Visualizer();
  // 获取 iframe 元素
  const iframe = sdkWrapIframe.value;
  // 获取 iframe 的内容窗口
  const targetWindow = iframe.contentWindow;
  const options = {
    version: '0.7.46',
    canvas: true, 
    keyframes: false
  };
  try {
    await visualizer.setup(targetWindow, options);
    // 渲染回放数据 
    const playbackDataTemp = []
    let timestamp = 0
    for (const iterator of playbackData) {
      let timestampDelay = timestamp == 0 ? 500 : (iterator.timestamp - timestamp)
      await delay(timestampDelay);
      playbackDataTemp.push(iterator)
      timestamp = iterator.timestamp
      await visualizer.html(playbackDataTemp, targetWindow, null, 0); 
    }
  } catch (e) {
    console.error('e11------>', e)
  }
}

[huidou886]

Replay repetition

Replay.repetition.mov

[AbdelrhmanMagdy]

Hello @huidou886,
You can find clarity-devtools in this repo which is a browser extension with live session replays against any website, you can follow how it leverages the visualizer to understands how it can be integrated in your project.

[AbdelrhmanMagdy]

Since we haven't received any further updates or responses, we're closing this issue for now.