Once your connections accept there invitations. You will be able to export there ID Codes Badge .json file.
- The Badge Integration information will give you an example on how to Integrate into your site.
- 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.
- 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
- 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.