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, blue, or as a transparent mark on any background you choose, square or rounded:

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 handle, which is the last part of your Expert Page address. If your Expert Page is https://answersfrom.me/scott, your handle is scott

Step 1. Copy the badge code

Paste the following wherever you want the badge to appear, replacing scott with your own handle in both places:

<a href="https://answersfrom.me/scott" target="_blank" rel="noopener"
   title="Ask Scott 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;"/>
</a>

Your Expert Page is https://answersfrom.me/ followed by your handle, the same address you use to share your Agent with anyone else.

Step 2. Pick a color, or use your own background

Three versions of the logo are available. The first two are ready-made badges in a fixed color. The third 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
	Blue, for icon rows tinted to a single accent color	afm_logo_short_box_pb_64.png
	White mark on a transparent background, shown here on purple	afm_logo_short_box_floating_64.png

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

Step 3. Apply your choice

Follow whichever of the two variants below matches the version you picked.

If you picked the green or blue badge:

Both are the same logo at the same size, so if you want blue, swap the filename in the code from Step 1 without changing anything else.

The logo is a square image. Leave it as-is for a crisp tile, or add border-radius to soften the corners so it sits comfortably beside rounded icons. This is purely a CSS choice, and the same file does both.

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;"/>

Rounded, by adding border-radius:

<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: 3px;"/>

If you picked 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 Scott on Answers From Me"
   style="display: inline-block; width: 20px; height: 20px;
          border-radius: 3px; 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 badges:

• 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.

Step 4. Adjust sizing 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.
• Keep the alt text. The title attribute is optional and shows on hover.

Step 5. 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.