# How to Add Clarity to Your Website | Creght Visual Documentation

> What Is Clarity? Clarity is a free user behavior analytics tool from Microsoft. It records user sessions, click heatmaps, and replay data to help improve websit…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/help)

[Changelog](/blogs)

[AI](/docs/ai/quick-create-first-website) [Visual](/docs/get-start)

Basic

- [Get to Know Creght in 2 Minutes](/docs/get-start)
- [How to Register for Creght](/docs/signup)
- [Creating a Project in Creght](/docs/create-site)
- [Templates](/docs/tpls)

Design

- [Using the Editor](/docs/editor)
- [Basic Operations](/docs/operating)
- [Layouts in Creght](/docs/layout)
- [Position in Creght](/docs/position)
- [Size in Creght](/docs/size)
- [Breakpoints in Creght](/docs/breakpoint)
- [Overlays](/docs/popover)
- [Components in Creght](/docs/components)
- [Adding Third-Party Fonts](/docs/tp-font)
- [Duplicate and Deep Copy](/docs/deep-copy)

CMS

- [CMS (Content Management System)](/docs/cms)
- [Importing WeChat Official Account Articles into CMS](/docs/wxmp)

Site Setting

- [Page Settings](/docs/page-setting)
- [How to Upgrade a Plan](/docs/manage-plan)
- [SEO Settings](/docs/seo-setting)
- [Small Files (Site Verification)](/docs/verification-file)
- [Adding a Custom Domain in Creght](/docs/custom-domain)
- [How to Complete ICP Filing](/docs/beian)
- [Server Nodes](/docs/website-node)
- [How to Switch Sites](/docs/pxrp79jqtnyq)
- [Localization](/docs/localization)

AI

- [About Creght AI](/docs/creght-ai)
- [AI Text Processing](/docs/ai-text)
- [AI - Page Generation](/docs/ai-generate)

Tool

- [Convert Figma Designs into Live Websites](/docs/figma-to-creght)
- [3 Guidelines for Responsive Figma Layouts](/docs/figma-autolayout)
- [Covert Figma to live website](/docs/response-site)
- [Figma to Responsive Website: Interactions](/docs/figma03)
- [Compressing Video with FFmpeg](/docs/ffmpeg)
- [How to Add Clarity to Your Website](/docs/clarity)
- [Creating a Button Hover Effect](/docs/button)
- [How to Build a Reusable Collapsible FAQ Panel](/docs/collapse)
- [Responsive Navigation Tutorial](/docs/nav)

Tool/

# How to Add Clarity to Your Website

## What Is Clarity?

Clarity is a free user behavior analytics tool from Microsoft. It records user sessions, click heatmaps, and replay data to help improve website user experience.

## Quick Start

Open [https://clarity.microsoft.com/](https://clarity.microsoft.com/) and sign in with a Microsoft account or Google account.

Create a new project by clicking New Project, then enter the website name, URL, and industry.

After creating the project, copy the JavaScript tracking code snippet provided by Clarity.

In Creght, paste the code into Project Details > Website Details > Basic Settings > Custom Code > Head Code.

## Verify Installation

Visit your website, then return to the Clarity console and check whether data has been received. It usually takes 10 to 30 minutes for data to appear.

On this page

- [What Is Clarity?](#what-is-clarity)
- [Quick Start](#quick-start)
- [Verify Installation](#verify-installation)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/)

[Discord](https://discord.gg/Qvq2nmZNnb)

## Links

- [Pricing](/price)
- [Help Center](/help)
- [Contact Us](/contact)
- [Blog](/blogs)
- [Refund Policy](/tuikuan)

## Resources

- [All Resources](/resources)
- [Templates](/templates)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/effects)
- [Figma to Creght](/figma2creght)
- [API for AI](/api)

## Terms

- [Terms of Service](/legal/terms)
- [Privacy Policy](/legal/privacy)
- [Acceptable Use Policy](/legal/acceptable-use)

## Social Media

- [Twitter](https://twitter.com)
- [Facebook](https://www.facebook.com)
- [LinkedIn](https://www.linkedin.com)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)