Styling with SDK

Pay 3x or 4x over an agreed period

To style the element inside the iframe, use the SDK to inject your CSS rules. Valid CSS is required by the SDK. If syntax errors occur (missing semicolons, braces, etc.), the SDK attempts to preserve as many valid rules as possible.

CSS Sanitization

CSS Sanitization is a process that checks and cleans up CSS code to prevent potential security risks and ensure the code is valid. There are some limitations to the CSS rules you can inject into the iframe:

Inside the iframe, only the element #text can be styled. You can style #text:focus, #text:hover, and the toggling classes for this element:

• .invalid
• .valid
• .not-empty

The best practice is to always prefix CSS selectors with #text to ensure they pass the sanitization process.

You can only use the following properties:

Typography

Visual Effects

Browser-Specific Properties

For example:

If you inject the following style, our CSS sanitizer will remove all unauthorized rules and properties before injecting the style into the iframe:

Before

#text {
  background: url('https://abc.com/a.png'); /* unauthorized */
  color: black;
}
.valid:hover {
  position: absolute; /* unauthorized */
  margin: 5px; /* unauthorized */
  font-size: 1.2em;
}
/* th