This example will help you integrate Gravatar images into your website using HTML and JavaScript.
<pre class="wp-block-syntaxhighlighter-code"><!DOCTYPE html>
<html>
<body>
<img id="gravatar-image">
</body>
<script>
document.addEventListener( 'DOMContentLoaded', () => {
// Step 1: Hash your email address using SHA-256.
const hashedEmail = CryptoJS.SHA256( 'your-email@example.com' );
// Step 2: Construct the Gravatar URL.
const gravatarUrl = `https://www.gravatar.com/avatar/${hashedEmail}`;
// Step 3: Set the image source to the Gravatar URL.
document.getElementById( 'gravatar-image' ).src = gravatarUrl;
} );
</script>
<a href="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js">https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js</a>
</html></pre>