The Badge Element
The ID Codes badge is an iframe element that needs to be added to the markup of the page on which you want to display the badge. The iframe itself is 50 pixels squared, and displays the circular ID codes icon at roughly 40 pixels squared.
To integrate the badge with your page you simply need to add the iframe code to the right location in your page’s code and a bit of CSS to position the icon as you please.
Integration Code Examples
The first step to determine how to integrate the badge into your site is to identify what kind of HTML markup your page uses to display profile images. The easiest use case is profile images that use a background image on a <div> or other HTML element. For example, Vinny’s profile on Civic.com:
The HTML markup for this section of display looks like this:
To integrate the ID codes badge, we simply need to add the iframe code nested inside the <div> which has the profile photo as a background like this:
Now all we need to do is add some CSS code to position the badge correctly. We add relative position to the container <div>, and absolute position to the <iframe>, along with directional properties to position the badge where we like it:
The directional CSS values can be adjusted to fine tune the exact position of the badge relative to the profile photo. If we have everything set correctly in our HTML and CSS, we should see the desired result:
You may find that you need to adjust this styling for different devices, a simple media query will do:
