Embed Documentation

Quick Start

Add a risk badge to your site in seconds. Just copy and paste this code:

<iframe
  src="https://displacement.ai/api/embed/software-engineer"
  width="300"
  height="150"
  frameborder="0"
  title="AI Displacement Risk Badge"
  style="border-radius: 8px;"
></iframe>

Replace software-engineer with any job slug from our job directory.

Live Example

Here's what the embedded badge looks like:

Customization Options

Customize the badge appearance using URL parameters.

Size Options

Choose the size that best fits your design.

<iframe
  src="https://displacement.ai/api/embed/software-engineer?size=small"
  width="200"
  height="100"
></iframe>

<iframe
  src="https://displacement.ai/api/embed/software-engineer?size=medium"
  width="300"
  height="150"
></iframe>

<iframe
  src="https://displacement.ai/api/embed/software-engineer?size=large"
  width="400"
  height="200"
></iframe>

Theme Options

Match the badge to your site's color scheme.

src="https://displacement.ai/api/embed/software-engineer?theme=dark"

src="https://displacement.ai/api/embed/software-engineer?theme=light"

URL Structure

The embed URL follows this pattern:

Find job slugs in our job directory or use the widget configurator.

Best Practices

• Include accessibility attributes

  Always include a title attribute for screen readers.
• Match the iframe dimensions to the size parameter

  Small: 200x100, Medium: 300x150, Large: 400x200
• Use the appropriate theme for your background

  Dark theme for dark backgrounds, light theme for light backgrounds.
• Add border-radius for a polished look

  Use style="border-radius: 8px;" to match the badge corners.

Licensing