Floating badges sit on top of your website as a compact overlay instead of inside a content section. They keep the trust signal visible without changing your page layout.
You can now generate a floating badge in the AI editor by describing what you want in a prompt. The editor builds the layout, position, and style for you.
Before you start
You need at least one connected source in your account, such as a Google Business Profile, Facebook Page, or a custom source. The AI editor uses the reviews from that source to populate the badge.
Create a floating badge
Go to the Widgets tab and click 'Generate with AI.'
In the prompt input, describe the floating badge you want. For example: 'Create a floating Google reviews badge in the bottom right corner of the page.'
Wait for the AI editor to generate the widget. The preview shows the badge floating in the position you described.
Refine the design with follow-up prompts if needed. You can adjust the corner, the colors, the size, the source logo, and whether the badge expands when clicked.
Once the badge looks right, copy the embed code from the Embed tab and paste it into your website.
Prompt examples
Create a floating star rating badge anchored to the bottom right corner.
Show a floating Facebook reviews badge in the bottom left, with my brand colors.
Create a compact floating badge with just the average rating and total review count.
Make the floating badge expand into a card with the latest three reviews when clicked.
Tips
Be specific about the corner or position you want. Prompts like "bottom right" or "top left" give the most predictable results.
If the badge does not appear on your live site, check that your source is fully connected and that the embed code was pasted before the closing body tag.
Frequently asked questions
Can I switch a floating badge back to an inline widget? Yes. Open the widget in the AI editor and prompt for an inline layout, for example: Change this widget to an inline badge inside the page content.
Why does my floating badge look fine in the editor but not appear on my website? This usually means the embed code is placed in the wrong location or your source is not yet fully synced. Re-paste the embed code right before the closing body tag, and confirm your source is connected under Sources.
Can I have more than one floating badge on the same page? We recommend one floating badge per page so it stays visible without crowding the screen.
Does the floating badge work on mobile? Yes. The AI editor generates a responsive layout by default. If you want different behaviour on mobile, you can prompt for it, for example: Hide the floating badge on screens narrower than 600 pixels.
Have questions? Click the chat icon at the bottom right of the page to talk with our customer success team, or email us at support@embedsocial.com. We are here to help. 🙏