Components
Text Components
Media
Buttons
Layout
Component Definitions
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.
Nami recommends limiting your title text to 1 line
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.
If you want multiple types of text inside the text block, use a Group component instead
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.
If you want to use different icons for each list item, use a Custom List component instead.
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.
Product field components are only available within the Repeating Product Group. They reference a line of text that is configured per product.
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.
If you want a background image, upload an image to the Background section and size to "Fill"
Image Specs
Paywalls support .PNG, .JPG, or .JPEG files. No .GIF, .WEBP, or .AVIF support.
Nami recommends compressed JPEG files under 300MB. Larger files may not load at all on poor networks.
If you are using a carousel or uploading more than 3 images to your paywall, we recommend compressing images even further to help paywall load time.
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.
Android devices use Material Symbols and iOS devices use SFSymbols.
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.
See Capabilities to learn more.
Not currently available on TV
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.
Nami recommends uploading compressed JPG images to the carousel. Images less than 200KB work best for loading quickly on mobile devices.
The carousel and slides need to have a fixed height. By default this height is set to 300, but you can make it larger or smaller.
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.
If you only want to show the login button if the user isn't already logged in, use the Login Check capability
The Restore Purchases button will kick off the native platform Restore process.
The Close Button will close the paywall. Typically this button is located in the Header at top left or right but you can also insert a close button anywhere else in the paywall.
Close Button can support an icon or short text.
A successful purchase will also close the paywall.
Not available on TV
Implementing Hard 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.
Hard Paywalls only work on Apple devices.
On Android devices, users can use the device back mechanism to leave the paywall.
Premium Feature
Purchase Button is a Premium paywall feature. You must be on any paid plan to use.
See Capabilities to learn more.
Not available on TV
The Purchase Button is attached to the Selected Styling capability.
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.
Web URLs look like https://sampleapp.com/link. If you want to link the user internally inside your app, use a Deeplink Button.
Not available on TV
Premium Feature
Deeplink Button is a Premium paywall feature. You must be on our Team plan or above to use.
See Capabilities to learn more.
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
Enterprise Feature
Video and Custom Video Controls are available only on Enterprise plans. Contact your Nami account rep to learn more.
Play Control allows you to add a custom styled Play/Pause button to the paywall to control the Video component.
Your paywall must have a Video added first.
Enterprise Feature
Video and Custom Video Controls are available only on Enterprise plans. Contact your Nami account rep to learn more.
Volume Control allows you to add a custom styled Mute/Unmute button to the paywall to control the Video component.
Your paywall must have a Video added first.
A group is a way of organizing content. The Content 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.
Requires SDK Version 3.2.1+
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.
Q: Do I need to create a repeating product group for each product?
No! Just drag products into the Added Products list to add to the group.
Premium Feature
Product Group Toggle is a Premium paywall feature. You must be on our Business plan or above to use.
See Capabilities to learn more.
Not available on TV
A Product Group Toggle allow you to organize multiple products into groups that the user can switch between.
To add a Product Group Toggle, you must add the Product Groups capability.
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.
You can only have 1 component inside a condition. If you need multiple items, wrap all of the items in a group
Badges are a special component that are only available on Products. A badge is a text container that is often used with Featured Styling.
Last updated
