Choose the embed style that works best for your website.
Self-contained with explanation and example. Best for first-time visitors.
Square yourself across five political dimensions
Takes less than 2 minutes · Free & open source
import { SquaresEmbedReact } from '@squares-app/react';
function MyComponent() {
return (
<SquaresEmbedReact
variant="card"
buttonText="Square Your Political Personality"
align="center"
maxWidth="600px"
primaryColor="#4285f4"
borderRadius="12px"
shadow={true}
/>
);
}Full card with image, description, and button
Square yourself across five political dimensions
Takes less than 2 minutes · Free & open source
import { SquaresEmbedReact } from '@squares-app/react';
function MyComponent() {
return (
<SquaresEmbedReact
variant="card"
buttonText="Square Your Political Personality"
align="center"
maxWidth="600px"
primaryColor="#4285f4"
borderRadius="12px"
shadow={true}
/>
);
}Minimal embed for sites where context is already provided.
import { SquaresEmbedReact } from '@squares-app/react';
function MyComponent() {
return (
<SquaresEmbedReact
variant="button"
buttonText="Square Your Political Personality"
align="center"
maxWidth="400px"
/>
);
}| Option | Type | Default | Description |
|---|---|---|---|
variant | string | 'card' | 'card' or 'button' |
buttonText | string | 'Square Your Political Personality' | Custom button text |
align | string | 'center' | 'left', 'center', or 'right' |
maxWidth | string | null | Max width (e.g., '600px') |
primaryColor | string | null | Custom button color (hex) |
borderRadius | string | null | Custom border radius |
shadow | boolean | true | Show/hide shadow |