Components
Last updated
Last updated
Title text is larger and more prominent than other text types. Titles draw attention, so you should limit how many title text elements are on your paywall.
Body text can be used for paragraphs of text. It is sized smaller than title text and can be inserted anywhere.
Legal text is a special body text type designed for inserting your legal terms and conditions. Legal text has support for links
A text block is a paragraph of text on a colored background. Text blocks support fill color, border color, border radius, and border width.
Use Text Blocks when you want text to stand out against the background.
This component takes each line of text provided and constructs a bulleted list. Lists support 1 icon that is used for each item in the list.
This component allows you to have a list with different icons for each bullet AND/OR images embedded in the bullet.
By default, each new list item has an icon and a line of text. You can remove or update the icon, add or remove text, and add or remove images from the list item.
Learn more about Product Fields: Product Fields
Images can be inserted anywhere in the paywall. They can be fixed width and height or can size to fit the container.
If you want to upload a logo, upload a small PNG file and set height and width.
Paywalls support .PNG, .JPG, or .JPEG files. No .GIF, .WEBP, or .AVIF support.
Enterprise Feature
Hosted Images are available only on Enterprise plans. Contact your Nami account rep to learn more.
Hosted Images are references to image URLs you host in your own system.
Nami supports a small library of icons preloaded. The icons you see in the previewer won't match each device exactly.
Icons have a font size and font color associated.
Premium Feature
Carousel is a Premium paywall feature. You must be on our Team plan or above to use.
The carousel allows you to add a gallery of images representing your product. Each carousel slide supports 2 pieces of text and a background image.
The carousel supports up to 10 slides.
Enterprise Feature
Videos are available only on Enterprise plans. Contact your Nami account rep to learn more.
The Video component allows you to insert a video URL to play on your paywall.
You can also utilize Advanced Video Features to add custom controls and asynchronous video URLs.
The login button allows you to start your app sign in flow from the paywall. Your code is responsible for implementing the sign in process.
If your app requires all users to be logged in before they see a paywall, you don't need this component.
The Restore Purchases button will kick off the native platform Restore process.
Close Button can support an icon or short text.
A successful purchase will also close the paywall.
If you don't want users to be able to close the paywall and require purchase to continue, you want to implement a "hard" paywall.
Premium Feature
Purchase Button is a Premium paywall feature. You must be on any paid plan to use.
By adding a purchase button, you change the paywall from One-Tap Purchase Mode to Select to Purchase Mode
In Select to Purchase Mode, the user must select a product and then tap the Purchase button to start the purchase flow. By default one product is always selected but they can tap between products to decide.
A URL Button allows you to link users to a web URL when the element is clicked.
Premium Feature
Deeplink Button is a Premium paywall feature. You must be on our Team plan or above to use.
A Deeplink Button allows you to navigate users within your app by providing a link to another screen. Deeplink URLs look like sampleapp://link/settings
Your paywall must have a Video added first.
Your paywall must have a Video added first.
A radio button is a visual indicator that a product is selected.
A collapse is a component that can be expanded to show additional content. This is useful for showing long lists of value props.
A collapse has a header, which can be styled differently based on whether the collapse is open or closed.
A collapse also has a body which can contain a number of components.
A spacer is a component that takes up space. It has no fill color or styling but is just used to align content properly on the page.
A spacer without height or width will grow to take up all the available space in the container.
A spacer with height or width will use the height / width values specified.
The Repeating Product Group is a special type of group. It displays lists of products and repeats every item in the group once for each product.
Premium Feature
Product Group Toggle is a Premium paywall feature. You must be on our Business plan or above to use.
A Product Group Toggle allow you to organize multiple products into groups that the user can switch between.
A divider is a thin line used to visually divide content.
Conditions allow you to control when components are seen. If the visibility rules are met, the component inside the condition will be shown.
If you want multiple types of text inside the text block, use a component instead
If you want to use different icons for each list item, use a component instead.
Product field components are only available within the . They reference a line of text that is configured per product.
If you want a background image, upload an image to the section and size to "Fill"
Android devices use and iOS devices use
See to learn more.
If you only want to show the login button if the user isn't already logged in, use the capability
The Close Button will close the paywall. Typically this button is located in the at top left or right but you can also insert a close button anywhere else in the paywall.
See to learn more.
The Purchase Button is attached to the capability.
Web URLs look like https://sampleapp.com/link. If you want to link the user internally inside your app, use a .
See to learn more.
Play Control allows you to add a custom styled Play/Pause button to the paywall to control the component.
Volume Control allows you to add a custom styled Mute/Unmute button to the paywall to control the component.
A group is a way of organizing content. The Section is a group that has one set of direction, spacing, padding, and margin settings. If you want to group content with different settings, you will want to add a group.
See to learn more.
To add a Product Group Toggle, you must add the
Badges are a special component that are only available on Products. A badge is a text container that is often used with
Product Field
Terms Checkbox
