Adding Snapchat’s Bitmoji to your website
Tags: html, watercooler, portfolio, javascript
Published: 2021-05-22 02:50:01

<div class="modal-body">
<p>Emoji’s and personalized avatars have become the new normal in messaging and social media platforms. Back in the bay, ascii emoji’s were all the rage. Some examples&nbsp;are:</p>
<ul>
<li>:)</li>
<li>:P</li>
<li>:D</li>
<li>;)</li>
</ul>
<p>In case you’ve never heard of it, <a href="https://www.bitmoji.com/">Bitmoji</a> is a service that came out of snapchat that allows you to make a virtual avatar that looks like you. With hundreds of personalization options you can really customize it to your liking. One cool aspect is that they are always adding new clothing options that spice up your&nbsp;person.</p>
<p>Bitmoji also launched <a href="https://www.bitmoji.com/games/">Bitmoji for Games</a> in 2019 that allows developers to insert your player’s bitmoji into your 3D game. While I’ve never seen a game do this, it is definitely a cool&nbsp;idea!</p>
<p>Messaging with emoji and your personalizing your avatar is a fun way to keep things interesting when texting or sending someone money on Venmo. That’s why I thought it would be a cool idea to add my bitmoji to my own personal portfolio website!</p>
<p><a href="https://www.josephamaurer.com/"><strong>Check out the final result&nbsp;here!</strong></a></p>
<h3><strong>Download the Bitmoji&nbsp;app</strong></h3>
<p>The first step is really straight forward, head over to the app store of google play store and download the bitmoji app. Unfortunately, it doesn’t look like there is currently a way to setup a bitmoji on desktop&nbsp;:(</p>
<ul>
<li><a href="https://apps.apple.com/app/apple-store/id868077558">Apple App&nbsp;Store</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.bitstrips.imoji&amp;referrer=utm_source%3Dbitmoji%26utm_medium%3Dlanding">Google Play&nbsp;Store</a></li>
</ul>
<h3><strong>Setup your&nbsp;avatar</strong></h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/774/0*eyPooXwgxWFV79F-"></figure><p>This is the fun part, go ahead and customize your avatar to your liking! Apart from just facial shape, eye color, and hair color you can also pick you&nbsp;outfit.</p>
<h3><strong>Export Stickers</strong></h3>
<p>Once you are happy with your bitmoji, go ahead and head over to the sticker tab of the app (bottom left) and start searching for stickers that you would want to appear on your&nbsp;website.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/739/0*sdK8Nr3vKDHKSl7I"></figure><p>Once you find one, tap on it to bring up the share sheet. Hit ‘save Image’ to save a png to your&nbsp;phone.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/739/0*mxMFg7v6cJgBvEEj"></figure><h3>Coding Bitmoji</h3>
<p>Once you have 5 or 6 random sticker that you want to show up on your website, go ahead and add them to your project structure. The code below, picks a random element from the array and sets it as the image&nbsp;source:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*zcTHbDKra2CMTgG4"></figure><p>And there you go! You have successfully added your Bitmoji to your&nbsp;website!</p>
<p><strong>Give this a shot and let me know if it works for&nbsp;you!</strong></p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/398/0*EIuU-4cO7ks6KC0-"></figure><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c737ec6c7c9a" width="1" height="1" alt="">
</div>