Editable Properties
Learn about all the properties that can be edited per component
Last updated
Learn about all the properties that can be edited per component
Last updated
Nami paywalls have dozens of properties that can be used to make your paywall look exactly like your brand vision.
URL
Action
*
Screenreader Text (will only be added if you turn on Screenreader Text)
Autoplay
Transition Speed
Show Carousel Indicators (dots on the carousel to indicate number of slides and current slide position)
Active Indicator Color (applies only to the active carousel indicator dot)
Inactive Indicator Color (applies to all other active carousel indicator dots)
Not all properties are available when you create a new component. You can add a property to a component by scrolling to the bottom of the component editor drawer and selecting from the dropdown list.
For example, Margins are optional on most components but Height is only optional on some.
In-depth information about how to use specific properties:
The Text Input allows you to add text content to the component.
Italic
Text
Bold
Text
Bold Italic
Text
To add content to your bulleted list, enter items into the List Content editor. Each new line is a new list bullet
Action is available on select Button components and allows you to change the action triggered when a user clicks it.
Options:
Close Paywall
Login (see Accounts and Login/Logout)
Restore Purchase
Font Family allows you to select a different font for your text.
By default, all text uses the System Font.
Web Builder
Helvetica
iOS
Android
Roku
Roboto
All text elements have customizable font size.
All text elements support a font color. You can also apply transparency to the color.
Link Color is a special font color used only on links inside the text.
Text components support and can be set to align to the left, center, or right.
Groups and containers support multiple different alignment options so you can control where child content sits both vertically (top, center, bottom) and horizontally (left, center, right)
Some text components support strikethrough text applied. If set, the text will be crossed out with a line in the same color as the text element. This is useful for displaying price decreases or for identifying features that aren't available unless the user purchases a subscription.
Fill Color is the color applied to a container behind text or other elements. Groups, Buttons, and Text Blocks support Fill Color.
Fill Color can be a solid color, a transparent solid color, or a linear gradient
Border color can be applied to containers such as Groups, Buttons and Text Blocks. Border Color will not be used unless Border Width is greater than 0.
Border Width describes the width of the border color applied to a container. Border sits outside the container outside the Padding but inside the Margins.
On mobile devices, we recommend a border width of 5 or less.
Components such as buttons or sticky footers include a corner radius. Set to 0 for a 90° angle or set to a higher value to round the element.
Rounded Borders allow you to only apply corner radius to some of the component's sides. By default, all corners are rounded but you can edit this to create more complex designs.
Elevation (drop shadow) can be applied to buttons and groups. Use Elevation to subtly feature elements and give them dimension.
Width has 3 variants: Fill, Fit, or a fixed number of pixels.
Nami doesn't recommend using fixed width for most elements. Fixed width items may not size well on all devices.
Instead, use Fill to ensure components always grow to the screen size or Fit to size components around their content.
Fit
Fit will size the element to the width of all content inside the component, including the children. It also will include the padding of the component.
Fill
Fill will expand the component to take up as much width as it can.
If 2 components with width 'Fill' are inside of a group with horizontal Direction, each component will take up 50% of the group width.
Fixed
Do not apply Left or Right Padding to a fixed width component.
Don't use fit content. Instead use Fill to make sure the buttons are the same width and the buttons together take up 100% of their parent.
Or you can use a fixed width button, but this isn't recommended as it won't size well on all devices
Height has 3 variants: Fill, Fit, or a fixed number of pixels.
Be careful using a Fixed height with text items, especially when the text includes Smart Text variables. The text may overflow the container.
Also, if the user has increased font size on their device, the text may not fit anymore.
Fit
Fit will size the element to the height of all content inside the component, including the children. It also will include the padding of the component.
Fill
Fill will expand the component to take up as much height as it can.
If 2 components with height 'Fill' are inside of a group with vertical Direction, each component will take up 50% of the group height.
Fixed
Do not apply Top or Bottom Padding to a fixed height component
Image Crop is used only on image components. It defines how the image should fit inside the constraints of the component.
Image Crop Fit means the image will fit the space without cropping any of the content. This may leave whitespace on the sides.
Image Crop Fill means the image will fill the entire space. The image dimensions will be retained but some of the image may be cut off.
Direction specifies which way the components in a Group should be aligned. Horizontal means the objects will fit side-by-side (also known as column). Vertical means they will be stacked (row)
By default, the Content section has vertical alignment which means each component inside will be stacked on top of each other.
Spacing defines how much space exists between elements in a Group.
By default, the Content section has 20 spacing, which means each item inside it will be separated by 20px.
Each component has 4 padding controls. Padding provides spacing between the items within a component and the outside of the component.
Each component has 4 optional margin controls. Margins provide space outside a component.
Certain components such as Containers, Badges or Text Blocks have advanced positioning options.
These components can be moved a specific # of pixels or a specific percentage on the X and Y axis. This positioning allows you to float elements over others.
Containers, Badges, and Text Blocks also have Z-Index controls to move an element in front of others on the paywall. In the example above, the badge has a Z-Index of 1, which allow the badge to sit on top of the product.
Icon allows you to choose a symbol from the Nami supported list. By default, the icon is a checkmark inside a circle, but we support a select list of other icons.
*
*
*
*
*
*
*
*
*
*
Settings only apply to
*Indicates a property that is optional on some components, see
If you are using the , you can utilize limited markdown options:
The Font Picker includes a selection of Google Fonts as well as any your org has uploaded.
Link Color currently only available for type components.
Roku paywalls don't support gradient fill colors. See below.
Fill Color Fallback is required if your CTV paywall is available on Roku platforms AND the you chose is a gradient.
Note that the icon in the previewer will differ slightly from the device display. The previewer uses , while Android devices use and iOS devices use
