In the world of web development, gaining insights into the user’s environment is crucial for creating seamless and responsive experiences. One way to achieve this is by harnessing the power of JavaScript.

In this quick snippet, we set out to capture the user agent information—a string that holds details about the user’s browser and device—and embed it as a custom attribute in the HTML document.

// Adds the user agent to a data attribute in the HTML
document.documentElement.setAttribute('data-useragent', navigator.userAgent);