JavaScript

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>

Important Notes

Provide a link to gravatar.com/profile and let your users know how to edit their Gravatar profile. Use of our free APIs is governed by these Guidelines for Responsible Use. Documentation is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Last updated on:

May 7, 2024

Table of Contents