Add an Answers From Me badge to your website

As an Expert, you can send Knowledge Seekers to your Expert Page from anywhere you already have a presence online. Many of our Experts list their LinkedIn, X, or Instagram profiles on a team page, speaker bio, or site footer, and the Answers From Me badge lets you add your AI Agent to that same row of icons.

The badge is a small logo image that links to your Expert Page. It comes in green, or as a transparent mark on any background you choose, square or rounded:

Answers From Me    Answers From Me    Answers From Me    Answers From Me

Badge or embed?

These instructions are for our Answers From Me badge, which is a small logo that links to your Expert Page, typically opening a new browser window. If you want to embed your AI Agent directly on your website so that your visitors can interact with your agent without leaving your site, see Embed your Answers From Me AI Agent.

Before you begin

To add the badge:

  • Your web hosting or author platform must allow you to add a small amount of HTML to the page where you want the badge to appear
  • You must have a Knowledge Hub on Answers From Me for which you are the Expert
  • You should know your Expert Page address, which you paste into the badge code. It is https://answersfrom.me/ followed by your handle, for example https://answersfrom.me/scott. There is no www. in the address, which is intentional

Step 1. Copy the badge code

Choose one of the following sizes to start from, copy the code, and then paste it in your target HTML document, replacing scott with your handle. The green logo with rounded corners is our preferred style, but you can change the color and corner rounding in Step 2.

SizeBadgeCode
20px Answers From Me 
<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask me on Answers From Me">
    <img src="https://pub.answersfrom.me/icons/afm_logo_short_box_64.png"
         alt="Answers From Me"
         style="height: 20px; width: auto; vertical-align: -4px; border-radius: 2px;"/>
</a>
24px Answers From Me 
<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask me on Answers From Me">
    <img src="https://pub.answersfrom.me/icons/afm_logo_short_box_64.png"
         alt="Answers From Me"
         style="height: 24px; width: auto; vertical-align: -4px; border-radius: 3px;"/>
</a>
36px Answers From Me 
<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask me on Answers From Me">
    <img src="https://pub.answersfrom.me/icons/afm_logo_short_box_64.png"
         alt="Answers From Me"
         style="height: 36px; width: auto; vertical-align: -4px; border-radius: 4px;"/>
</a>
48px Answers From Me 
<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask me on Answers From Me">
    <img src="https://pub.answersfrom.me/icons/afm_logo_short_box_64.png"
         alt="Answers From Me"
         style="height: 48px; width: auto; vertical-align: -4px; border-radius: 6px;"/>
</a>

Step 2. Customize to suit your site design

You can control the size, color, and corner rounding of the badge on your site.

Size and alignment

  • Set height only, and leave width: auto. Setting both can stretch the logo out of shape.
  • Match the icons next to it. If your other social icons are 20px, use height: 20px. The logo is supplied at 64px so it stays sharp on high-density screens at any size up to that.
  • Nudge it onto the baseline. Icon fonts such as Font Awesome sit slightly below the text baseline, so a bare image next to them looks high. vertical-align: -4px lines them up. Adjust by a pixel either way to taste.

Color

Two versions of the logo are available. The green badge is ready to use as-is. The other is just the white mark on a transparent background, so you choose the color behind it to match a brand palette exactly, or to place the badge on a photo or a gradient.

Version Filename
Green, the standard Answers From Me logo afm_logo_short_box_64.png
White mark on a transparent background, shown here on purple afm_logo_short_box_floating_64.png

The full address for either file is https://pub.answersfrom.me/icons/ followed by the filename.

To use the transparent mark, replace the code from Step 1 with the following. The color comes from the element around the mark, and the link itself can be that element, so no extra wrapper is needed:

<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask me on Answers From Me"
   style="display: inline-block; width: 20px; height: 20px;
          border-radius: 2px; vertical-align: -4px; background: #7a4fd6;">
  <img src="https://pub.answersfrom.me/icons/afm_logo_short_box_floating_64.png"
       alt="Answers From Me"
       style="width: 100%; height: 100%; display: block;" />
</a>

Change background to any color, gradient, or image. A few things differ from the ready-made badge:

  • The link carries the size, not the image. Set width and height on the link and let the image fill it with width: 100%; height: 100%.
  • border-radius goes on the link, not the image.
  • The mark is white, so it needs a dark or saturated background. It will be invisible on white and hard to read on pale colors.

Set background: #008729 and you get the standard green badge back. It is the same logo, with the color left to you.

Corner rounding

The logo is a square image, and the corners are softened with border-radius so the badge sits comfortably beside rounded icons. Drop that property for a crisp square tile, raise it to half the badge size for a circle, or keep the value from Step 1, which is the proportion our own logo uses, roughly one eighth of the size.

Square, with no extra CSS:

<img src="https://pub.answersfrom.me/icons/afm_logo_short_box_64.png"
     alt="Answers From Me"
     style="height: 20px; width: auto; vertical-align: -4px;"/>

A circle needs the transparent mark rather than the green badge, because rounding the badge that far would clip the logo inside it. Put the mark on a solid field and round the field all the way:

Answers From Me    Answers From Me    Answers From Me    Answers From Me
<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask me on Answers From Me"
   style="display: inline-block; width: 20px; height: 20px;
          border-radius: 50%; vertical-align: -4px; background: #000000;">
  <img src="https://pub.answersfrom.me/icons/afm_logo_short_box_floating_64.png"
       alt="Answers From Me"
       style="width: 100%; height: 100%; display: block;" />
</a>

Whichever version and size you choose, keep the alt text. The title attribute is optional and shows on hover.

Step 3. Preview, test, and publish

Using your platform tools, preview the change, click the badge to confirm it opens your Expert Page, and then publish to your website.

Hosting the icon yourself

The code above loads the logo from pub.answersfrom.me, which is the quickest way to get started. For a site you expect to keep for a while, hosting a copy of the image alongside your other assets is a small improvement worth making:

  • It loads faster. Your visitor's browser already has a connection open to your site. Loading the logo from the same place reuses that connection instead of looking up a second domain and negotiating a new secure connection for a single small image.
  • It is up whenever your site is up. The badge no longer depends on anything outside your site, so it keeps working if the file is ever moved or renamed on our end.
  • It fits your existing rules. If your site restricts where images may load from, for example with a Content Security Policy, a locally hosted file needs no exception.

To host it yourself:

  1. Download the PNG you want from https://pub.answersfrom.me/icons/ followed by the filename from Step 2, for example https://pub.answersfrom.me/icons/afm_logo_short_box_64.png
  2. Upload it wherever your site keeps images, such as the media library on WordPress or the images folder of a static site
  3. In the badge code, change the src attribute to the address of your uploaded copy, and leave the href pointing at your Expert Page
<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask Scott on Answers From Me">
    <img src="https://www.example.com/images/afm_logo_short_box_64.png"
         alt="Answers From Me"
         style="height: 20px; width: auto; vertical-align: -4px;"/>
</a>

Keep the filename as-is so it is easy to tell which color you uploaded, and keep the height and width: auto styling so the copy is displayed exactly like the hosted version.

Adding the badge in WordPress

Most WordPress themes give you somewhere to paste HTML, and the code above goes in as-is.

On a team or staff page, edit the person's entry and look for a social, social links, or social icons field. If it already contains the markup for a LinkedIn icon, add the Answers From Me code right after it, separated by a space.

For a sitewide badge, go to Appearance → Widgets, add a Custom HTML widget to your footer or sidebar, and paste the code there.

You can also host the image yourself. Upload the PNG via Media → Add New and point src at the address WordPress gives you. See Hosting the icon yourself above for why you might want to.

Troubleshooting

The logo looks stretched. Both width and height are set to the same value. Set height only and let width: auto do the rest.

The logo sits too high next to other icons. Adjust vertical-align. Try -3px or -5px.

The logo looks blurry. It is being displayed larger than 64px. Each version is also available at 256px: replace _64 with _256 in the filename, for example afm_logo_short_box_256.png, and keep the same height styling. If you need larger still, contact support and we will send you a file.