Abrazo Embeds / Appearance
Style and size an Abrazo embed
Choose approved appearance tokens, give the component enough width and height, and test it at real mobile and desktop breakpoints.
Updated
Integration Kit components adapt inside the space the website provides. Use the setup controls for supported appearance choices and give the host container room to render the component's current state.
Start with the natural width
Place the component in a full content column before adding a narrow sidebar or fixed-height wrapper. A container that is too small can hide actions or create nested scrolling.
Use supported appearance controls
Choose the available background, surface, text, and border values in setup. Avoid site-wide CSS that reaches into the embedded frame because those selectors are outside the supported contract.
Test real states
Check loading, content, empty, error, and permission states at the actual page width. Test keyboard focus, zoom, and a narrow phone viewport before publishing.
Step by step
Work through the task
- 1
Install the component in a normal full-width content section.
- 2
Choose the supported appearance values in Integration Kit setup.
- 3
Remove fixed heights or overflow rules that clip the component.
- 4
Preview loading, content, empty, and error states when the component supports them.
- 5
Test desktop, phone width, keyboard navigation, and browser zoom on the live website page.
Common questions
Why is the bottom of the component cut off?
Check the website builder's container height and overflow settings. Use the generated responsive installation shape and avoid a smaller fixed height.
Can my website CSS restyle everything inside the component?
Use the supported appearance controls. CSS from the host page should not depend on internal component selectors.