``` For example, you want to remove `

` tag from your web page only while its being displayed in your mobile app. You need to find out `class` or `id` property of that element. In our case, here we have class property available. So, we can use `body` as our element's identifier. So, all the elements with the `body` class name will be removed from the web page. Here, the associated class for the header is **vc\_custom\_1547458063113** which looks unique to the div. You can try to remove from inspect elements page too to see if it is really hiding it. Or you can always see it in out preview app. If you are using class property then enter `.body` or if using id property then enter `#body` in the Element's identifier field. So, make sure you append `.` at the start if using class and `#` in case of id property. Here I am giving it as below.

This is how you can remove some element from the web page. If you have any issue and need help then don't hesitate to contact our support. ### Example of elements

What you find in website inspect code	What you have to put in element identifier
<div class="wp-header">...</div>	.wp-header
<div id="wp-header">...</div>	#wp-header
<header>...</header>	header
<div class="any non unique element" data-block="section1_sub">...</div>	[data-block="section1_sub"]

# Page Refresh The Page Refresh feature in Twinr enables your app to automatically refresh all screens when changes occur in specified page refresh identifiers. This is particularly useful for dynamic content, ensuring that users see the most up-to-date information without needing to manually refresh the app.

## How It Works Twinr provides two options to keep your app screens updated: 1. **Tab Auto-Refresh** * When enabled, each tab in your app will reload automatically every time users switch between them. * By default, tabs are preloaded once and do not refresh when switching. Enabling this ensures users always see the latest information. 2. **Page Refresh Integration** * You can define **Element Identifiers** (e.g., `.et-cart-quantity`) that the app will monitor for changes. * Whenever the defined element changes, all related app screens automatically refresh to reflect the updated data. * Example: If a user adds an item to their cart, the cart screen refreshes to display the new total or updated item list. ## How to Enable? **1.)** Go to **General Settings** from the left menu and select the **Page Refresh** tab. **2.)** Toggle **Enable Tab Auto-Refresh** if you want tabs to reload every time users switch tabs. **3.)** Toggle **Enable Page Refresh Integration** if you want the app to refresh screens when specific elements are updated. **4.)** Add the required **Element Identifier(s)**. * Example: `.et-cart-quantity` * You can find the cart counter selector by inspecting the cart button on your website. **5.)** Click **Save As a Draft** to save your changes. {% file src="/files/3beT8OL2A5veoMEX3m1i" %} **3.)** Save as Draft and [Preview](/dashboard/preview-app). # Login Setup login requirements for your app. {% content-ref url="/pages/JaKE7QtRQVNbQgMC824Q" %} [General](/screen-customization/login/general) {% endcontent-ref %} {% content-ref url="/pages/oiitkouDxtsQJwIyAvRh" %} [Login Page](/screen-customization/login/login-page) {% endcontent-ref %} # General Login feature is very important when you want your users to login first before accessing the application screens. ### When should you use Login? When you want the user to login into the account first before he enters the main screens, you should enable this feature. As an example, Web Portals, in which the dashboards and other screens are only visible after login. ### Questions that can help you decide if you want to enable login Login section will help you decide authentication flow of your app. Here, you can decide * If you want to enable login for your app or not. * Do you want your users to first login and then see tab screens? * Do you want to keep users logged in every time they open the app? Based on your selections, few options will gets enabled/disabled. ![Enable Login](/files/Nqqa5FpQ16e0GYlQUZy7) ![Setup login](/files/IzlB5fjgbpuuhGHaWV9E) ### Login status check script This is the most important part of the login process. Here, you need to add JavaScript which will help Twinr Framework identify login status of the user. Your script must return following four statuses. * **loggedIn**: This status means user is currently logged in and we allow them see post login screens. * **notLoggedIn**: This status means user is currently not logged in. * **authError**: This means user has entered wrong username and password. * **unknown**: This means auth status is currently unknown. This should be default status as well. Status names must match exactly as mentioned above. ### Example Script \***NOTE:** Do not copy the same. You have to find the selector from your website. {% code lineNumbers="true" %} ```javascript if(document.querySelector('#login_front')) {'notLoggedIn'} else if(document.querySelector('.fa-sign-out-alt')) {'loggedIn'} else if(document.querySelector('.alert-danger')){'authError'} else {'unknown'} ``` {% endcode %} Understanding of above code: * ``` if(document.querySelector('#login_front')) {'notLoggedIn'} // If you find a unique element "#login_form" from the page, please return the status "notLoggedIn". // All the login pages generally have login forms. So you have to find the selector for that form. It is most likely under the

tag. // Selector can be any unique element that a login page can have. // Checkout this video to see how to find elements. https://youtu.be/2UE5RLltKHo ``` * ``` if(document.querySelector('.fa-sign-out-alt')) {'loggedIn'} // If you find a unique element ".fa-sign-out-alt" from the page, please return the status "loggedIn". // You can choose this element from the first page the user see after loggin in. ``` * ``` if(document.querySelector('.alert-danger')){'authError'} // If you find a unique element ".alert-danger" from the page, please return the status "authError". // When the user enters incorrect information, one error message is shown. You have to select the element for that error message. // Note that there can be different messages for different errors. Like incorrect username, incorrect password, something went wrong, or anything that you have put. You have to put them all in if statement. For example, if(document.querySelector('#username-error') || document.querySelector('#input-password-error') || document.querySelector('.alert-danger')){'authError'} ``` * ``` else {'unknown'} // This is a status you return when there is any errors other than any of above. ``` ### How to test the login script? You can test the login script on the browser's console. If the status it returns is correct, then you are good to go! ### Login Page Selectors Here, give the elements we are asking for. * **Login form selector**: Enter the login form selector here. * **Submit button selector**: Enter login form submit button selector. * **Username field selector**: Enter username field selector. * **Password field selector**: Enter password field selector. # Login Page Setup login pages URLs. In this section, you need to enter two URLs. * **Login Page URL:** This must be your login page where we can find login form. * **Any other page URL which requires logged in to open:** This URL can be any URL which needs user logged in before opening it. For example, my account page.

# Tab bar(Bottom tabs) Find all the documents related to tab screen. Tab screens are more usable screens of the app. You can create multiple tab screens and customize it appropriately. Each Tab screen can have its own customization such as URL, selected icon, un-selected icon, navigation bar buttons and more. Read through below documents to understand how each section will help you to customize a tab screen. {% content-ref url="/pages/vDgFb7zevCOuueT2uYBJ" %} [Add New Screen](/screen-customization/tab-bar/add-new-screen) {% endcontent-ref %} {% content-ref url="/pages/fnEpSexgsgp05K6MMdSN" %} [Delete Screen](/screen-customization/tab-bar/delete-screen) {% endcontent-ref %} {% content-ref url="/pages/opOQQLckvs6EG6PJy45K" %} [Rearrange Screen](/screen-customization/tab-bar/rearrange-screen) {% endcontent-ref %} {% content-ref url="/pages/U9FuNkdUUY2OB968zAna" %} [General](/screen-customization/tab-bar/general) {% endcontent-ref %} {% content-ref url="/pages/6MzZ7UWXu052RNjjqOwN" %} [Navigation Bar](/screen-customization/tab-bar/navigation-bar) {% endcontent-ref %} {% content-ref url="/pages/pajGjTAeIyjp4q5ZLX8D" %} [Tab Screen - External URL Handling](/screen-customization/tab-bar/tab-screen-external-url-handling) {% endcontent-ref %} {% content-ref url="/pages/Lse7n1ojIBlQCWAN4AvL" %} [Tab Screen - Hide Elements](/screen-customization/tab-bar/tab-screen-hide-elements) {% endcontent-ref %} # Add New Screen Add a new screen to your app. This screen will be added to your application's tab bar. You can easily add new screen to you app by pressing '**+ Add Screen**' button. Clicking on that link will open a popup to ask a few new screen information.

It will ask you to enter following three information. * **Screen Name:** Name of the screen will be used to display in the Tab Bar and Navigation Bar. You can't have same name for two tab screens so make sure another screen doesn't have a similar name * **Screen URL:** This will be used as primary URL of the screen. This will be the first URL you will be seeing while opening this tab in the app. * **Screen Icon:** Screen icon will be displayed in the tab bar. ![](/files/kuF9sk3JhmOk2xUkmjbh) As soon as you click on **Add** button, you will be able to see this screen in the list of screens.

# Delete Screen Here, you have an option to delete the screen as well. Make sure before you delete a screen because this is can't be undone.

# Rearrange Screen If you want to rearrange the order of the screens, you easily do it with the help of rearrange button and drag(up/down) it wherever you want to put it.

# General Set general tab screen information.

In this section, you can define general tab screen settings. * **Title**: Title will be displayed as tab title. * **URL**: This will be the first page you can see while you open this tab. * **Unselected tab icon**: Icon image of the tab as shown in the image. * You can use PNG, JPG or JPEG format image. This icon will be used as selected and unselected icon if you didn't provide `Tab selected icon`. * You can chose an icon from our default icons library.

* **Selected tab icon:** This icon will be displayed for the active tab. Like in above image, Home tab is active tab right now and the rest are inactive. ### Bottom tab badge: This can be used to show the badge for cart, notification, wishlist etc. When the item is added in the cart, the badge counter will be updated automatically. **Tab Badge selector:** Here, you need to put the selector for the counter. Refer to this table for choosing element identifier.

# Navigation Bar Set navigation bar of the tab screen. Navigation Bar represents the top bar of the screen. In this section, you can define navigation bar settings for the selected tab screen. Each tab screen can have its own navigation bar settings.

## Enable/disable Navigation Bar Using this option, you can easily enable/disable navigation bar. Disabling a navigation bar means you screen will be displayed without a top bar. You can either user the native navigation bar from Twinr or keep the header from your website. It's always recommended to use native navigation bar. Toggle the button to enable or disable it.

# Navigation Bar Title

### Title Type You can choose between two type of navigation bar title. * **Use Tab Title Text:** This option will use Tab title as navigation bar title. It will be a plain text.

* **Use Tab Image:** This option will ask you to add image you want to use as a navigation bar title. It will look something like below:

### Title Position You can choose between Left or Center.

# Navigation Bar Buttons ![](/files/UKmbeYxWXBe5mmT4mUse) We support 5 type of navigation bar buttons. * Back Button * Linker Button * Cart Button * JS Injector Button * Tag Selector Button * Hamburger Menu * Native Link Sharing You have the flexibility to decide which button you want on which side. You can add buttons either on the left or right side. The button will be displayed in the same order as you are adding them. {% content-ref url="/pages/B1xnUF7Lj1ZqhzPDYMAb" %} [Back Button](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/back-button) {% endcontent-ref %} {% content-ref url="/pages/XlDfhwjcCZ2UrDCnU3MB" %} [Linker Button](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/linker-button) {% endcontent-ref %} {% content-ref url="/pages/UIfdOGlivwxgFVWRbi8c" %} [Cart Button](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/cart-button) {% endcontent-ref %} {% content-ref url="/pages/LwUSryXwCXNq8UXgr8P8" %} [Custom Button](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/custom-button) {% endcontent-ref %} {% content-ref url="/pages/huiPH2Q0s80QVGPM348A" %} [Broken mention](broken://pages/huiPH2Q0s80QVGPM348A) {% endcontent-ref %} {% content-ref url="/pages/PXiTq1VhOn8LhvqZj3zy" %} [Hamburger Menu](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/hamburger-menu) {% endcontent-ref %} {% content-ref url="/pages/YLGGL9KOiW7DJmO2wypD" %} [Native Link Sharing](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/native-link-sharing) {% endcontent-ref %} # Back Button Back button is **default button** on the left side. Back button is a default navigation bar button. You can edit the button and change the icon. Back button **can't be deleted** and it will be always on the left side. As soon as, there will be navigation in the tab, back button will be visible automatically. Similarly, it will be hidden as soon as there won't be any navigation to be done.

# Linker Button As name suggest, Linker button is a link to a specific page. You can specify which page it should get redirected to on click of the button. **Step: 1** Go to Any screen where you want to add the linker button. Then go to navigation bar and add the button on left or right side. You can add different linker buttons both the sides as well.

**Step: 2** Choose Linker button.

**Step: 3** Choose Button Icon and URL you want to open on the click of that button. ![Add Linker Button Popup](/files/rn0Hyov2O90E6JzM0ZB1) **Step: 4** Preview the changes on [Preview App](/dashboard/preview-app). Here in the below application, I have used a facebook page link as a linker button.

# Cart Button This button lets you create a cart with badge natively in top navigation bar. Very useful if you are selling something online. Cart button comes with a lot of customization. If you have the cart button on your website's header, then you can mimic it natively on Twinr. **Step: 1** Go to Any screen where you want to add the Cart button. Then go to navigation bar and add the button on left or right side. You can add different cart buttons both the sides as well. For example, you can add wishlist button as well with badge!

**Step: 2** Fill the information needed. Let's take a look at each fields of the form. * **Button Icon:** Here you need to upload button icon image. It's a required field. * **URL:** An URL where you wants to redirect to on click of the button. * **Badge Action:** You can decide how cart counter badge should get displayed. It has Right, Left, Center or Badge (top right corner). * **Badge Color:** Badge background color. In the image below you can see badge background color is red. * **Counter Text Color:** Color of the counter text. For example, in the below image it's white. * **Cart counter selector:** You can find cart counter selector by inspecting a cart button on your website. **Step: 3** Preview the changes on [Preview App](/dashboard/preview-app).

# Custom Button This button is used when you want to perform any action on the click of it. **Step: 1** Go to Any screen where you want to add the custom button. Then go to navigation bar and add the button on left or right side. You can add different custom buttons both the sides as well.

**Step: 2** Fill out the needed info. **Button Action:** * Execute Script: This action will inject your specified JS on the click of the button. JS can be for any purpose. * Web Page Element Click: This action will perform the same action as the webpage element. For example, you can mimic the search button action. When you click on the custom button, it will open the search bar as if you clicked on the search button! You can map native button to web page element click. Clicking on the native button will generate a click on the specified selector element. **Button Icon:** Upload icon here or select from the list. **Script:** For Execute Script action, write the JavaScript you want to run on the click of the button. **Element's identifier:** This is the class or id of the element you want to do action on. **Step: 4** Preview the changes on [Preview App](/dashboard/preview-app). # Hamburger Menu ### What is Hamburger Menu? The **Hamburger Menu** is a side navigation menu that slides in from the left or right side of the app screen. It is commonly known as a **Drawer Menu**. This menu allows users to access different sections or pages of your app quickly and efficiently. ![](/files/l9fToHaUK48Mnm3gMufP) Follow the steps below to integrate the Hamburger Menu ### **1.) Add Hamburger Menu to the Right or Left Side of the Navigation Bar** Go to the **Screen** section and open **Navigation Bar Buttons** under the **Navigation Bar** settings.\ Add a button to either **Left Side Buttons** or **Right Side Buttons**, and select **Hamburger** from the popup options. ![](/files/q8YZJ9lgFvSJuPHGfptN) ### **2.) Choose the Style of Your Choice** You can select from **three default styles** for your Hamburger Menu: **Style 1 :** Left-aligned menu items, fully customizable in font size and color.\ **Style 2 :** Left-aligned menu items with icons and logo, a heading on top, and a close button at the bottom. Fully customizable in all aspects.\ **Style 3 :** Center-aligned menu items, customizable in font size and color. After selecting your preferred style, click **Next** to proceed. * Click "Next" after choosing your preferable style. ![](/files/PeKfTA0Abi6muEVrT5wE) ### **3.)** Add Menu items * Next is to start adding main items links in your hamburger menu. * Click on "Add menu item" and add menu. You can add nested menu items(up to 1 level). * You can see the changes in previewer. You can chose Android or iOS. * Click "Next" once you are done adding it. ![](/files/CctILPa2SE7NqmGKPYGb) ![](/files/Iz9JRyYO7lnFKxvIxN10) #### Add Menu Item Dialog When you click on **Add Menu Item**, an **Add Hamburger Menu Item** dialog will open.\ Fill in the required details as described below.

| **Field** | **Description** | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | **Icon** | Upload or select an icon that represents your menu item. The icon appears next to the title in the menu list. | | **Title**\* | Enter the name of the menu item (e.g., *Profile*, *My Orders*). This is a required field. | | **Menu Item URL**\* | Enter the URL that this item should open when tapped. The URL must begin with **https\://** (e.g., `https://burgerhouse.com`). | | **Visibility** | Choose who can see this menu item: Logged-in users, Non-loggedIn User, or All users. | | **User** | Define which users can access this menu item. Default is **All**. | | **Enable Firebase Analytics (Premium)** | Toggle this option to track analytics events when users click on this menu item. Available only for **Premium plan** users. | You can preview the menu in real time on the right-hand side panel for both **Android** and **iOS**. Once you’ve filled in the required information, click **Next** to proceed or **Cancel** to discard the changes. **Example:**\ In the example below, the menu includes three items — *Categories*, *Bread* (nested under Categories), and *Contact*. ### **4.)** Customize the Menu The **Customize** section allows you to personalize the overall look and feel of your Hamburger Menu to match your app’s design and branding. Each option lets you control how the menu appears and behaves for your users. ![](/files/Etjgv3YbQMp7mejiB5Va) ### Styles #### Background Color Choose the background color of the hamburger menu panel. * Select from predefined theme colors (Primary, Body, Background, etc.) * Or choose **Custom** and enter a HEX color code * Opacity can be adjusted (100% = fully visible) *** #### Menu Icon * **Icon**: Upload the icon used to open the hamburger menu\ Supported format: `.svg` * **Close Icon**: Upload the icon shown when the menu is open\ Supported formats: `.png`, `.jpg`, `.jpeg` *** ### Visibility Control who can see the hamburger menu in your app. * **User** * All users * Logged-in users only * Logged-out users only This helps tailor navigation based on authentication state. *** ### Expand / Collapse Icons Customize the icons used to expand and collapse menu sections. * **Expand Icon**: Icon shown when the menu can be expanded * **Collapse Icon**: Icon shown when the menu is expanded * **Expand/Collapse Icon Size**: Set icon size in pixels for consistent appearance Supported formats: `.png`, `.jpg`, `.jpeg` *** ### Menu Text Control the appearance of text inside the hamburger menu. #### Text Style * Choose from predefined styles (Heading, Body, Label) * Select **Custom** to manually control typography *** #### Font Size & Weight * **Font Size**: Set text size in pixels * **Font Weight**: Choose Regular, Medium, or Bold to control emphasis *** #### Font Style (Premium) * Select a custom font family for menu text * This option is available **only for Premium plans** *** #### Text Color * Choose from theme colors or set a **Custom HEX color** * Adjust opacity to control text visibility *** #### Menu Icon Size * Define the size of icons shown next to menu items * Helps maintain visual balance between text and icons ### **5.)** Save Your Setup After completing all configurations, it’s important to ensure that your Hamburger Menu setup is saved properly so that none of your design or functional changes are lost. #### **Add Your Menu Configuration** Once you have finalized the menu design, styles, and items, click on **Add** to confirm your setup. This action saves your Hamburger Menu configuration within the project. #### **Save as Draft** After adding the menu, make sure to click **Save as Draft**. This step stores all your changes safely and allows you to revisit or modify the menu before publishing the app. It’s a crucial step to prevent any data loss during testing or editing. #### **Preview Your Menu** Once saved, you can preview your Hamburger Menu directly within the editor. Use the preview panel to check both **Android** and **iOS** views, ensuring that the design and functionality appear as expected on different devices. # Native Link Sharing Native Link Sharing button in a native app means that you can forward any link to another app or platform – without leaving that app. See the example image below.

### 1) Add Native link sharing button on right or left side of the Navigation bar

### 2) Choose the button icon

### 3) Click on Add # Native Notification Screen Button {% hint style="danger" %} [Native Notification Screen](/integrations/native-notification-screen) integration must be enabled before you use this button. {% endhint %}

* Upload a Button Icon (PNG, JPG, or JPEG). * Choose a Badge Color (color of the notification dot). * Select a Counter Text Color (color of the notification count number). * (Optional) Enable Firebase Analytics to track how many users click on the button. # Tab Screen - External URL Handling Define URL handling policies at tab level.

External URL Handling provides an option to handle different URLs elegantly. You can define general rule for Different Domain URLs. Also, you have an option to define custom rules based on URL matching. You can define external URL handling in the General Settings as well as in tab. Tab level external URL handling rule will take precedence over General URL handling rule. Twinr Framework will first try to match with Tab level rule and then general rule if required. Please check this [document](/screen-customization/external-url-handling) to see how external URL handling rule work and how you can add it. # Responsible URL {% embed url="" %} How to implement Responsible URLs {% endembed %} Responsible URL feature provides an option to handle redirection of different URLs from any tabs to a particular tab elegantly. You have an option to define expressions based on URL matching and redirect the user to that tab screen. All the tabs has their own Responsible URLs. You must define it separately for all tabs if required. Let's take an example. **Scenario :** I have showcased some hot selling and new arrival products on Home screen. When I click on any of it, it should open it in Shop screen rather than Home screen.

Showcased Product opening on Home screen

### Steps to add responsible URLs: * Go to the screen where you want to add the responsible URL. As an example here, I want to redirect all the products specific URLs to Shop page. So go to Shop screen. * Go to Responsible URLs ![Add responsible URLs](/files/EucqonsJZR6nFLctUvSt) * Click on +ADD button * In Expression to match, Enter the URL expression you want to match. As an example, my URL is . Which means all the products are matching with the expression "product/" * In Match as, you can decide how you want to match the expression. As a substring, Prefix, Suffix or Equal. Here I want to redirect all the urls containing "products/" as a substring, to Shop screen. * Save it as a Draft and Test it. # Tab Screen - Hide Elements Tab screen have its own web page customization option. It will be combination of general web page customizations and tab ones as well. If you want to apply customization to all tab screens then add it to the general section. Please follow this [document](/screen-customization/hide-elements) to read how you can customize your page. # Tab Screen - CSS Watch video below to see how you to customize your web page by applying CSS. {% file src="/files/jZkAGgbA9KDH4zM6SdjO" %} # Tab Screen - Scripts Watch video below to see how you to customize your web page by adding JavaScripts. {% file src="/files/MlF0q1UQvsZZoiF8LeqR" %} # Native Screen # Title Element The Title element lets you add prominent text to your screen—like a page heading or section title. This is usually the first thing your users see on the screen, so it’s important for setting the tone and guiding them through the app. Twinr gives you two simple tabs to control everything: * **Content Tab** – where you type your text. * **Settings Tab** – where you style and adjust how it looks and feels. Let’s walk through both tabs. 👇 *** {% tabs fullWidth="true" %} {% tab title="Custom Tab" %} ### ✏️ Add Your Text * Title Field: This is where you enter the main text. * Example: This is random text

{% endtab %} {% tab title="Settings Tab" %} ### 🎨 Design Your Title

#### 1. Text Style * Set **Text Style** to **Custom** for full control over size, weight, color, and font. * You can also select from predefined styles such as **Heading**, **Body**, or **Label** to automatically apply theme-based typography. #### 2. Font Size & Weight * Font Size: Choose how big your title should look (e.g., 20px). * Font Weight: Decide how thick the text appears (e.g., Bold 700). #### 3. Color * Pick from predefined styles like Heading or set a Custom Color using a HEX code. * Example: #171D1B is a bold black used for headings. #### 4. Text Alignment * Align the text to Left, Center, or Right. *** ## 📏 Margin Settings

You can also add space (padding) around the title: * Top / Bottom / Left / Right margins can be adjusted using sliders. * Use the 🔗 icon to link margins for symmetry. * Default spacing is 20px on all sides. *** ## 👁️ Visibility Settings

The Visibility section helps you control who can see the element and where it appears. This gives you flexibility to show different content to different users or on specific devices. You can adjust visibility based on: #### 1. Platform Choose which platform the element should be visible on: * All (default) * Android * iOS #### 2. Device Control which device types will display this element: * All (default) * Mobile * Tablet & iPad #### 3. User Target visibility by user type: * All (default) * Guest Users (not logged in) * Logged-in Users
{% endtab %} {% endtabs %} ### 📌 Use Case Example: Want to show a “Welcome Back!” title only to users who are signed in? Set User to Logged-in Users. *** ### 📱 How It Looks As you update the content and settings, the preview in the center shows exactly how your app will look to users. No guesswork needed!

*** ## 🔍 Summary | Section | What You Can Do | | ------------ | --------------------------------------------------------------- | | Content Tab | Type your title text | | Settings Tab | Customize font, color, alignment, and spacing | | Live Preview | Instantly see changes on your app screen or look at preview app | # Paragraph Element The Paragraph element is perfect for adding supporting text under titles or anywhere on your app screen. Think of it like a regular text block, good for descriptions, instructions, or extra info. Like the Title element, it also has two main tabs: * **Content Tab** – where you write your paragraph. * **Settings Tab** – where you style and space it. *** {% tabs %} {% tab title="Custom Tab" %} ### ✏️ Write Your Paragraph * Type your paragraph inside the box. * You can enter as much text as you need.

📌 Pro Tip: Keep paragraphs short and break them into sections for readability. Long blocks of text can be hard to read on mobile. {% endtab %} {% tab title="Settings Tab" %} ### 🎨 Style Your Paragraph

#### 1. Text Style Choose how the text styling is applied. * **Predefined Styles**: Select from styles like *Body Small, Body Medium, Heading*, etc., to automatically apply preset font size and weight. * **Custom**: Select **Custom** to manually control font size, weight, color, alignment, and font style. > Selecting **Custom** unlocks advanced typography controls. #### 2. Font Size & Weight * Font Size: Choose the size (e.g., 10px is standard). * Font Weight: You can make it light, regular, or bold. #### 3. Color & Opacity * Use a HEX code or select from your brand palette. * You can also set opacity (transparency) — 100% is fully visible, 50% is half-transparent. #### 4. Text Alignment * Align your paragraph to Left, Center, or Right *** ### 📏 Margin Settings

Adjust the spacing around the paragraph using sliders: * Top, Bottom, Left, Right – each margin can be changed individually. * Use 🔗 to sync spacing on top & bottom or left & right. *** ### 👁️ Visibility Settings

Just like the Title element, you can decide where and to whom this paragraph is shown: * Platform: Show it on Android, iOS, or all. * Device: Target mobile or tablet users. * User: Set visibility for All, Guest, or Logged-in users. {% endtab %} {% endtabs %} *** ## 📱 How It Looks

## ✅ Summary | Tab | What You Can Do | | ------------ | ------------------------------------------------- | | Content | Type your paragraph text | | Settings | Adjust font, color, opacity, spacing, alignment | | Visibility | Choose platform, device type, and user role | | Live Preview | Instantly view how your text looks inside the app | # Button Element The Button element lets you create call-to-action (CTA) buttons like “Buy Now”, “View More”, or “Open Link”. You can link these buttons to any page, product, or even an external website. It’s a key interactive element that drives user actions. *** {% tabs %} {% tab title="Content Tab" %} ### ✏️ Set Button Details You can choose between: * 1 Button – Simple, single action (default) * 2 Button – Two side-by-side buttons for dual actions (e.g., “Yes” / “No”) #### For each button: * Button Title – The visible text on the button (e.g., “Shop Now”) * Action URL – Where the user goes when they tap the button (e.g., your website, screen link, or a custom URL) 📝 *Make sure your links are valid and start with https\:// or twinr:// for app-specific links.* {% endtab %} {% tab title="Settings Tab" %} ## Settings Tab ### 🎨 Customize Look and Layout ### Layout * Button Size: Small, Medium, or Large * Button Width: * Fill: stretches across the screen * Fit to text: wraps button tightly around the text * Alignment: * Left, Center, or Right align the button within the screen ### Design Choose from preset styles for button appearance: * Filled, Outlined, or Link-style buttons ### Margin Add spacing around the button using sliders for: * Top and Bottom margins (default: 20px) *** ### 👁️ Visibility Settings You can control where and to whom the button appears: * Platform: Android, iOS, or All * Device: Mobile, Tablet, or All * User: Guest users, Logged-in users, or All {% endtab %} {% endtabs %} ## ✅ Summary | Tab | What You Can Do | | ---------- | -------------------------------------------------- | | Content | Add button title(s) and destination links | | Settings | Style buttons, adjust layout and alignment | | Visibility | Choose device, platform, and user-specific display | | Preview | Instantly see how it looks inside your app screen | # Image Element The Image Element lets you add a standalone image to your app screen, perfect for visual banners, promo cards, logos, or clickable graphics. Like a button, you can also link the image to a URL or screen. *** {% tabs %} {% tab title="Content Tab" %} ## Add Your Image * Select Image – Upload your image (JPEG, PNG, etc.) * Click Action – Add a URL or app screen link Example: or twinr://about 📌 **Tip**: Use this element for visual-only promotions or when you don’t need text/buttons layered on top. {% endtab %} {% tab title="Settings Tab" %} ## Customize the Look ### 🎨 Design * Ratio – Choose aspect ratio (e.g., 1:1, 16:9, 4:3) * Corner Radius – Adjust how rounded the image corners are * Options: Square → Rounded → Pill * Display Mode: * Fit – Keeps full image visible (may leave white space) * Fill – Covers the container area (may crop image) ### 📏 Margin Adjust padding around the image: * Top, Bottom, Left, Right – all customizable via sliders ### 👁️ Visibility Options Control where and when the image shows: * Platform: iOS, Android, PWA, All * Device: Mobile, Tablet, All * User: Guest, Logged-in, All {% endtab %} {% endtabs %} ## 📱 Use Case Ideas * Promotional banners * Logos or brand visuals * Full-width hero images * Image-based navigation (clickable tiles) ## ✅ Summary | Feature | What You Can Do | | ------------ | ------------------------------------- | | Image | Upload an image | | Click Action | Add a URL or screen link | | Ratio & Fit | Control image scaling and size | | Styling | Apply rounded corners, adjust spacing | | Visibility | Platform/device/user targeting | # Spacer Element The Spacer Element adds empty vertical space between components on your app screen. It’s perfect for improving readability, separating sections, or aligning elements for better visual flow. *** ## Settings Tab – Adjust the Space ### Height * Use the slider to increase or decrease space (in pixels) * You can also enter an exact value (e.g., 20px, 60px, etc.) ### 👁️ Visibility Like other Twinr elements, you can choose where and when the spacer appears: * Platform: iOS, Android, PWA, or All * Device: Mobile, Tablet, or All * User: Guest, Logged-in, or All *** ### ✅ Use Case Examples | Scenario | How Spacer Helps | | ----------------------------------- | -------------------------------------------------- | | Add breathing room between cards | Insert a 20–40px spacer | | Separate banner from product list | Add a spacer to break visual flow | | Custom layouts with multiple blocks | Use spacers to create clear groupings | | Mobile optimization | Show different spacers for mobile/tablet if needed | # Divider Element The Divider Element adds a thin horizontal line between content blocks. It helps visually separate sections on a screen, improving readability and layout clarity. *** ## ⚙️ Settings Tab – Customize Your Divider ### 🔧 Divider Settings * Height: Use the slider to set line thickness (e.g., 1px–10px) * Color: Choose from your brand palette or enter a HEX code (e.g., #171B1D) ### 📏 Margin Add spacing around the divider: * Adjust Top, Bottom, Left, and Right margins * Use linked controls (🔗) to keep spacing consistent ### 👁️ Visibility Control where and when the divider appears: * Platform: Android, iOS, PWA, or All * Device: Mobile, Tablet, or All * User: Guest, Logged-in, or All *** ### ✅ Use Case Ideas | Scenario | Why Use Divider | | ------------------------------- | ------------------------------------- | | Between banner and product list | Creates visual flow | | Between FAQs or sections | Improves content scannability | | Under section headers | Adds definition to titles or sections | | Between form fields or rows | Separates grouped UI elements | # Banner Element Banner has two types: * **Banner Element(with Background Image)** The Banner with Background Image is one of the most visually striking elements in your app. It’s designed to grab attention, great for promotions, offers, or important updates. You can add a background image, customize text styles, layout, button action, and more. * **Banner Element(with Background Color)** The Banner with Background Color is a clean, lightweight version of the image banner. Instead of using a background image, you use a solid color with the option to add an image *within* the banner content. It’s ideal for highlighting offers, updates, or info blocks that don’t need a full-width image background. # Banner Element(with Background Image) The Banner with Background Image is one of the most visually striking elements in your app. It’s designed to grab attention, great for promotions, offers, or important updates. You can add a background image, customize text styles, layout, button action, and more. *** {% tabs %} {% tab title="Content Tab" %} ## Add Your Banner Info This is where you set up each banner item: ### 🔽 Sections: * Background Image: Upload your main banner visual (required) * Title: Bold headline (e.g., “Year-End Sale”) * Subtitle: Optional upper text (e.g., “Up to 90%”) * Description: Supporting details or message * Button Text: CTA (e.g., “Shop Now”) * Button Action: Enter the URL to navigate when the button is tapped You can create multiple banners and manage them using the Banner Item List (add, delete, reorder, toggle visibility). {% endtab %} {% tab title="Settings Tab" %} ## Design & Customization The banner comes with detailed configuration options grouped into different sections: ### 📐 Layout * Choose Layout: * Split 1, Split 2, Split 3: Image and text side-by-side in various arrangements * Stack Top, Center, Bottom: Stack content vertically * Alignment: Align content left, center, or right ### 🖱️ Scroll Behaviour * Scroll Direction: Switch between horizontal or vertical banners * Indicator Style: Multiple styles to show scrolling progress * Indicator Alignment: Align indicator (left, center, right) * Indicator Position: Show indicator on banner or under banner ### 🎨 Design Settings * Ratio: Choose aspect ratio (e.g., 4:3) * Corner Radius: Adjust image roundness — square, rounded, or pill * Apply Overlay: Optionally apply a dark overlay to enhance text readability ### **🔤 Title Style** * Font Size (e.g., 16px) * Font Weight (e.g., Bold – 700) * Color – HEX input (e.g., #FFFFFF) * Opacity – Adjust transparency (0 to 100%) ### **✍️ Subtitle Style** * Font Size (e.g., 10px) * Font Weight (e.g., SemiBold – 600) * Color and Opacity ### **📝 Description Style** * Same customization options as subtitle — ideal for body text ### **🔘 Button Style** * Choose from: * Filled * Outlined * Text * Customize: * Margin (Top/Bottom/Left/Right) * Button color, shape, and padding via theme ### 👁️ Visibility Control when and where this banner is shown: * Platform: Android, iOS, or All * Device: Mobile or Tablet/iPad * User: Guest, Logged-in, or All {% endtab %} {% endtabs %} ## 📱 How It Looks Below are examples of how the banner appears in the app: > Clean layout with center stacked content and horizontal scroll > >

> Split layout with style split 1 and verticle scroll > >

*** ## ✅ Summary | Tab | What You Can Customize | | ---------------- | ------------------------------------------------ | | Content | Image, title, subtitle, description, button text | | Layout | Position, alignment, scroll indicators | | Text Styles | Font size, weight, color, opacity | | Button Style | Design type, margins, link | | Visibility | User/device/platform targeting | | Multiple Banners | Manage, reorder, or hide individual items | # Banner Element(with Background Color) The Banner with Background Color is a clean, lightweight version of the image banner. Instead of using a background image, you use a solid color — with the option to add an image *within* the banner content. It’s ideal for highlighting offers, updates, or info blocks that don’t need a full-width image background. *** {% tabs %} {% tab title="Content Tab" %} ## Add Your Banner Info You can add all the same content as the image banner: * Title (e.g., “Special Deal”) * Subtitle (optional) * Description (e.g., “Free shipping on orders over $50”) * Button Text and Action URL ✅ NEW: You can add an image inside the banner (e.g., a product or icon) — separate from the background. {% endtab %} {% tab title="Settings Tab" %} ## Design & Customization ### Layout * Choose Layout: Split and Stack layouts are available (like image banner) * ✅ Image Position: Since the image is added as content, you can place it: * Left * Right * Top * Bottom ### Scroll Behaviour Same options as the image banner: * Vertical / Horizontal scrolling * Indicator dots and their alignment ### 🎨 Design Settings All the text customization options are available for: * Title Style * Subtitle Style * Description Style * Button Style * Margins for spacing ### 👁️ Visibility Options Same as all Twinr native elements: * Platform: Android, iOS, or All * Device: Mobile or Tablet/iPad * User: Guest, Logged-in, or All {% endtab %} {% endtabs %} ### ✅ What’s Different from Image Banner? | Background Image | ✅ Yes | ❌ No | | ------------------------ | ----- | ----- | | Background Color | ❌ No | ✅ Yes | | Content Image (inside) | ❌ No | ✅ Yes | | Overlay Option | ✅ Yes | ❌ No | | Image Position (Content) | ❌ No | ✅ Yes | ## 📱 How It Looks > Here’s an example of a banner with background color and content image on the right side: > >

## ✅ Summary | Tab | What You Can Do | | ---------- | ------------------------------------------------ | | Content | Add title, description, CTA, and an inline image | | Layout | Choose content position and scrolling behavior | | Design | Style text, buttons, spacing | | Visibility | Show to specific users, platforms, or devices | # List Element There are 3 types of lists you can design on Twinr. * List Grid * List Horizontal * List Vertical # List Grid Element The List Grid element allows you to display multiple items in a compact, visual grid. It’s perfect for showing categories like “Shop by Department”, “Top Picks”, or “Explore More”. Each item can have an image, label, and a link to another screen or website. {% tabs %} {% tab title="Custom Tab" %} ## Add Items to Your Grid ### Title and CTA * Show Title – Toggle on/off to display a heading above your grid (e.g., “Top Selling Products”) * Title Text – Enter your heading text * Show CTA – Add a small “See All” link on the right * CTA Label – Customize the link text (e.g., “See All”, “Explore”) * Action URL – Link to another screen or external site ### List Items You can add as many grid items as you want. For each item, you can: * 🖼️ Upload an Image and select background color * ✏️ Add a Title (e.g., “Fruit & Vegetables”) * 🔗 Link it to a URL or screen (in settings for each item) 📌 **Tip**: Use square or round icons for a clean and uniform grid look. {% endtab %} {% tab title="Settings Tab" %} ## Design & Customization ### 📐 Layout * Choose List Type: Set to Grid List by default * Columns: Choose how many items per row – 1, 2, 3, or 4 * Spacing Between Items: Adjust spacing using the slider (e.g., 10px) ### 🖋 Title & CTA Style Customize the section heading and call-to-action (CTA) link: * **Title**: * Text Style (e.g., Body Medium) * Color (custom HEX or theme-based) * **CTA**: * Text Style (e.g., Label Large) * Color (custom HEX or theme-based) ### 🗂️ Card Style This section controls how each list item looks inside the grid. * **Ratio**: Set aspect ratio (e.g., 1:1 for square) * **Text Position**: * On Image (overlay text on image) * Under Image (text below image) * **Text Alignment**: Left, Center, or Right * **Image Style**: * Display Mode: Fit (contain) or Fill (cover) * Corner Radius: Adjust roundness from square to fully rounded * Apply Overlay: Toggle overlay for better text contrast when text is “On Image” ### 🏷️ Item Fields Customize the style of the individual item titles: * Text Style (e.g., Body Medium) * Color (HEX or theme) * Margins (Top, Bottom, Left, Right) – adjustable using sliders ### 👁️ Visibility Settings Like other elements, control when and where your List Grid appears: * Platform: Android, iOS, or All * Device: Mobile, Tablet, or All * User: Guest, Logged-in, or All {% endtab %} {% endtabs %} ## 📱 Use Cases

* 🍎 Category list (e.g., Fruits, Dairy, Bakery) * 🛍️ Shop sections (e.g., Men, Women, Kids) * 🧭 Navigation shortcuts (e.g., About, Services, Contact) *** ## ✅ Summary | Tab | Customization Options | | ----------- | --------------------------------------------------- | | Layout | Columns, spacing, list type | | Title & CTA | Text style and color | | Card Design | Image ratio, text position/alignment, corner radius | | Item Fields | Title font, color, and margins | | Visibility | Show by platform, device, or user role | # List Vertical Element The Vertical List is just like the Grid List — but stacked in a single column. It’s perfect for menus, feature lists, articles, or categories where a vertical scroll feels more natural. *** ### 📱 Use Cases

* 🍎 Category list (e.g., Fruits, Dairy, Bakery) * 🛍️ Shop sections (e.g., Men, Women, Kids) * 🧭 Navigation shortcuts (e.g., About, Services, Contact) * Article or Blog Feed (Blog headlines or news updates, Article previews with thumbnails and titles) * Service Menus(“Book a Service” options e.g., Salon, Spa, Home Cleaning) # List Horizontal Element The Horizontal List element lets you showcase scrollable content in a side-to-side format. Think: featured products, quick links, or top picks. It works great for visually engaging, swipeable content on mobile. This is also just like the Grid List. *** ### 📱 Use Cases

* 🍎 Category list (e.g., Fruits, Dairy, Bakery) * 🛍️ Shop sections (e.g., Men, Women, Kids) * 🧭 Navigation shortcuts (e.g., About, Services, Contact) * Offer Highlights * Events or Schedules(List of upcoming events, classes, or webinars) * Testimonials or reviews # Product List Element The Product List Element is designed to showcase items like products, deals, or featured offers in a grid or list format. It includes built-in fields for price, rating, discount, and visuals — making it ideal for building modern store-like layouts. *** {% tabs %} {% tab title="Custom Tab" %} This tab controls the title and call-to-action above the product cards. ### 📝 Title Section * Show Title – Toggle visibility * Title – Enter your section heading (e.g., “Burger & Wraps”) ### 🔗 CTA (Call-to-Action) * Show CTA – Toggle to display a CTA link/button * CTA Label – Text for the button (e.g., “View More”) * Action URL – Enter a link or internal screen (e.g., or twinr://products) {% endtab %} {% tab title="Settings Tab" %} ## Full Customization ### 📐 Layout * List Type: Grid List / Vertical List / Horizontal List * Columns (1 to 4 for grid layout) * Spacing Between Items: Adjust horizontal/vertical gaps ### 🏷 Title & CTA * Title Text Style + Color * CTA Text Style + Color ### 🎨 Card Design * Card Ratio: 1:1, 4:3, etc. * Card Background Color * Corner Radius for the full card ### 🛒 Item Fields Each product card includes the following fields: **✅ Title** * Text Style, Font Size, Font Weight, and Color **✅ Description** * Secondary info or product detail * Customizable in same way as title **✅ Price** * Bold pricing text * Font Style, Weight, Size, and Color **✅ Strikethrough Price (Original Price)** * Optional for showing discounts * Styled separately **✅ Discount %** * You can highlight % off using a separate text field **✅ Rating Star** * Star color (custom HEX) **✅ Rating Text** * e.g., “4.2”, “(89 reviews)” * Fully stylable text **✅ Review Counter** * Optional total count next to stars * Size and color customizable **✅ Image Style** * You can select fit or fill display mode ### 📏 Margin You can set: * Top / Bottom / Left / Right spacing for the card block ### 👁️ Visibility Show or hide this block conditionally: * By Platform: iOS / Android / PWA * By Device: Mobile / Tablet * By User: Guest / Logged-in {% endtab %} {% endtabs %} ## ✅ Use Case Ideas | Use Case | Description | | --------------- | ------------------------------------------ | | Product catalog | Browse items in a store | | Featured deals | “Top Picks” or “New Arrivals” section | | Combo bundles | Highlight paired product sets | | Flash sale | Time-sensitive list with discounts & stars | ## 📱 Result Looks like a native product list — with clean pricing, discount ribbons, star ratings, and more.

# Setting List Element The Settings List is a ready-to-use component for creating profile and settings screens. It organizes items into structured sections, each with customizable icons, titles, and links — just like a real app settings page. *** {% tabs %} {% tab title="Custom Tab" %} ## Add Sections & Items You’ll start by creating sections. Each section contains multiple items. #### ➕ Add Section * Section Title – Like a header (e.g., “My Information”) * Add Section Items – Each section can include rows like “Profile”, “My Orders”, “Help & Support” #### ➕ Add Section Item Fields Each item includes: * Title – e.g., “Rewards” * Subtitle – Optional small text under the title * Icon – Upload a PNG/JPG icon * Click Action – Set a URL or screen link (e.g., twinr://profile) * Visibility – Guest, Logged-in, or All {% endtab %} {% tab title="Settings Tab" %} ## Customize Appearance ### 🎨 Section Design * Background Color – Set background (solid or semi-transparent) * Corner Radius – Adjust section shape * Spacing Between Items – Customize vertical padding ### 🏷 Section Title * Text Style (e.g., Heading Small) * Color * Title Position: * Over the Section * Under the Section ### 🧱 Section Items **Icon Size** * Adjust height and width of the icons **Title & Subtitle** * Customize text style and color #### Arrow Used to show a navigation arrow at the end of each item (like “>” in native iOS/Android). * Upload Icon – PNG/JPG only * Height / Width – Adjust size to match row height #### Section Item Divider Adds a line between each row. * Height – Thickness of the divider (e.g., 0.25px) * Color – Match with app theme or tone ### 📏 Margin Add spacing around the divider: * Adjust Top, Bottom, Left, and Right margins * Use linked controls (🔗) to keep spacing consistent ### 👁️ Visibility Available for the entire settings list block: * Platform: Android, iOS, PWA * Device: Mobile / Tablet * User: Guest / Logged-in {% endtab %} {% endtabs %} ## ✅ Use Case Examples | My Information | Profile, My Orders, Rewards | | --------------- | --------------------------- | | Support & Legal | FAQ, Terms, Contact Us | *** ## 📱 Result A polished native-like settings screen with: * Grouped sections * Icons + labels * Optional arrows * Clean dividers

# Video Element The Video Element lets you embed and play videos directly inside your app’s native screen. It supports multiple formats and playback controls to enhance user experience. {% tabs %} {% tab title="Content Tab" %} ## Add Video 🎞 **Add Video**\ You can upload or link a video to display inside your app.\ Supported video sources include direct uploads or online URLs (e.g., YouTube, Vimeo, or hosted file links). #### 🧩 **How to Add a Video Element** 1. Navigate to the **Native Screen** where you want to add the video. 2. Click the **Add Element (+)** button. 3. From the element list, select **Video**. 4. A new video block will appear on the screen layout. {% endtab %} {% tab title="Settings Tab" %} ## Customize Appearance After adding the element, you can configure the following settings: | Setting | Description | | ---------------- | ---------------------------------------------------------------------- | | **Video Source** | Upload a video file or paste a video URL | | **Autoplay** | Toggle ON to start video playback automatically when the screen loads. | | **Repeat** | Toggle ON if you want the video to repeat automatically. | | **Mute** | Toggle ON to start playback without sound. | | **Controls** | Enable or disable visible playback controls (Play, Pause, Seek). | > 💡 **Tip:** Use short, lightweight videos (under 15MB) for faster loading and smoother performance. #### 🎨 **Video Design** * **Corner Radius:** Round video corners for a modern look. * **Margin :** Adjust spacing between the video and other elements. #### 👁️ **Visibility** * **Platform:** Android and/or iOS * **Device:** Mobile or Tablet * **User Type:** Non-Logged in, Logged-in, or All {% endtab %} {% endtabs %} #### ✅ **Use Case Examples** * **Welcome Screen:** Show an intro or brand animation. * **Tutorial Section:** Embed how-to videos. * **Promotional Page:** Play looping product highlights. ## 📱 How It Looks Below are example of how the video appears in the app: >

# Countdown Timer The Countdown Timer helps you display a live ticking timer — ideal for limited-time offers, events, or special launches. {% tabs %} {% tab title="Content Tab" %} ## Configure Timer ⏰ **Timer Setup**\ Add a timer block and set your countdown details. **Timer Fields:** * **End Date & Time** – Select when the countdown will finish. * **Time Zone** – Choose the correct time zone for accuracy. * **Action on Completion** – Decide what happens when the timer hits zero (e.g., redirect, show message, or hide element). 🧮 **Display Options** * **Format:** Choose what units to display (Days, Hours, Minutes, Seconds). * **Initial State:** Option to hide timer until loaded. {% endtab %} {% tab title="Settings Tab" %} ## Customize Appearance ### 🎨 **Timer Design** * **Background Color:** Add a background to the timer area. * **Corner Radius:** Round off the timer edges for smoother visuals. * **Padding & Spacing:** Adjust internal and external margins. 🏷 **Text & Number Styles** * **Font Style:** Heading, Label, or Custom size. * **Color:** Match your app theme. * **Alignment:** Centered or aligned to the edges. 🎯 **Timer Box Style** * **Border or Shadow:** Add subtle borders or drop shadows to enhance visibility. * **Animation:** Enable smooth transitions as numbers change. ### 👁️ **Visibility** * **Platform:** Android, iOS, or PWA * **Device:** Mobile / Tablet * **User Type:** Guest / Logged-in {% endtab %} {% endtabs %} ### ✅ **Use Case Examples** * **Flash Sale:** Countdown to the end of an offer. * **Event Launch:** Show time remaining until an event begins. * **Feature Unlock:** Display time left until a new update goes live. ## 📱 How It Looks Below are example of how the Countdown Timer appears in the app: >

# Search Element The Search Element allows users to quickly search content within your app by entering keywords, making it easier to find relevant items such as products, listings, or articles. {% tabs %} {% tab title="Content Tab" %} ### 🔧 Configure Search Add a search bar to your screen and define how it behaves when users enter text. #### Search Fields: * **Hint Text** – Placeholder text displayed inside the search field (e.g., *Search…*). * **Action URL** – URL where users are redirected after searching. * Use `{{search}}` to dynamically pass the entered search text. **Example:** ``` https://yourdomain.com/search?q={{search}} ``` > ⚠️ Note: The `{{search}}` placeholder is mandatory to capture user input dynamically. > {% endtab %} {% tab title="Settings Tab" %} ### 🎨 Design * **Border**: Enable/disable border * **Corner Radius**: Square / Rounded / Fully rounded * **Text Style & Color**: Font size and text color * **Hint Text Color** * **Background / Fill Color** * **Border Color** * **Search Icon**: Upload or select a custom icon (PNG/JPG/JPEG) ### Spacing * **Margin**: Top, Bottom, Left, Right (px) ### 👁️ **Visibility** * **Platform:** Android, iOS, or PWA * **Device:** Mobile / Tablet * **User Type:** Guest / Logged-in {% endtab %} {% endtabs %} ### ✅ **Use Case Examples** * **Product Search**: Allow users to quickly find products by name or keyword. * **Content Discovery**: Search blogs, articles, or announcements inside the app. * **Help & Support**: Redirect users to FAQs or support pages based on search input. ## 📱 How It Looks Below are example of how the Countdown Timer appears in the app:

# Add New Configuration ![](/files/qoIrfqsqZ6sld9ARZOdJ) You can add new configuration when you want to release a new version of the app. Usually, you don't need to release a new version because we allow you deliver app changes over the cloud. So, you need a new configuration in two scenarios. 1. There are new features released by us and its not possible to use those features with the existing configuration. 2. Our framework has some big changes and it requires every app to adapt it. In the both the situation, it will ask you to create a new configuration. But, you can always create new configuration by yourself if you want. If for any reason you want to upload a new app version to the store, you need a new configuration. You can add new configuration from the app version dropdown. ![App Version Dropdown](/files/Z5MvfjlTCjY0uNZCmzWX) Creating a new configuration might restrict you to edit previous configuration. This happens if Twinr framework doesn't support older configurations anymore(It's very rare.). Adding a new configuration will ask you to insert new version of your app. ![](/files/Q0zJGD42yPAXNPUGycdl) As soon as you add a new configuration, all your data from the previous configuration will be carried over. Now, with the new configuration you can take advantage of the latest Twinr Builder features. # Overview {% content-ref url="/pages/gQ0dZGo4CzJ3KZYbl5UV" %} [Page Loader](/extensions/page-loader) {% endcontent-ref %} {% content-ref url="/pages/nkDy625XhVpctrZ1y3DL" %} [Pull to Refresh](/extensions/pull-to-refresh) {% endcontent-ref %} {% content-ref url="/pages/9DAwj5hJ8ALqlvpJPiVT" %} [Custom User Agent](/extensions/custom-user-agent) {% endcontent-ref %} {% content-ref url="/pages/jqesbgUFq1AJXaQVZORw" %} [No Internet View](/extensions/no-internet-view) {% endcontent-ref %} {% content-ref url="/pages/54TV9LyByuE43pchIL9d" %} [App Review](/extensions/app-review) {% endcontent-ref %} {% content-ref url="/pages/ZFU6OuqWeCalak9jHWqv" %} [App Onboarding](/extensions/app-onboarding) {% endcontent-ref %} {% content-ref url="/pages/kJFjSxJ0ew3AAU1zweIl" %} [Multi Language](/extensions/multi-language) {% endcontent-ref %} {% content-ref url="/pages/4PibekksGY3flUTi7avR" %} [In-App Purchase (IAP)](/extensions/in-app-purchase-iap) {% endcontent-ref %} {% content-ref url="/pages/jnYC5KHKPVgcqGRORcz3" %} [Custom Fonts](/extensions/custom-fonts) {% endcontent-ref %} {% content-ref url="/pages/slRdYKmv348B1jI1RdD8" %} [Deeplink](/extensions/deeplink) {% endcontent-ref %} {% content-ref url="/pages/8JXA1I2BoYOnYaPCTpdP" %} [Force App Update](/extensions/force-app-update) {% endcontent-ref %} {% content-ref url="/pages/0O0FxLfPN8i4yyuiRQnN" %} [Dynamic Titles](/extensions/dynamic-titles) {% endcontent-ref %} {% content-ref url="/pages/Rbug05pIflwq4ikGF29l" %} [Barcode / QR Scanner](/extensions/barcode-qr-scanner) {% endcontent-ref %} # Page Loader ### What is Page Loader? Page loaders are what you see on the mobile screen while the rest of the page’s content is still loading. ### How to setup Page Loader?

{% tabs %} {% tab title="General" %} **1.)** Go to Add-ons -> Extensions -> Page Loader & Enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Select a loader color to match your brand color. **3.)** Select a Background color and the transparency of the loading page.

**4.)** Save as a draft. {% endtab %} {% tab title="Cutomization" %} **1.)** **Select Loader Size:** You can decide the size of loader as per your requirement and UI. **2.)** **Select Custom Loader:** Twinr has a range of different animated loaders from which you can choose. **3.)** Save as a draft. {% endtab %} {% endtabs %} ### How to test Page loader in [Twinr Previewer App](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer)? ### ![](/files/hSzJKWKI25cBlbb0cHkX) Once you are done with the customization, open the app in previewer or refresh it from the floating hamburger button. You will be able to see the loader you have customized. ### Benefits of using Page Loader 1. Page loaders are one of the important user experience to let users know that the application is loading its content while they are looking at a tiny little geometry animated loader. 2. As a common psychology, interesting animations can keep your users engaged while they’re waiting for the page to load. 3. Twinr's speed performance is really competitive but it also depends on the user's internet speed and website speed. So in this kind of situations, it can be a very nice user experience if the right inspiration is there by providing a nice loader. ### Common Questions

Do I need to submit new version everytime I edit the Page Loader?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to publish new version after enabling Page Loader?

**Answer:** No, enable/disable the loader, save it and click on publish to production. Your LIVE app will have the changes right away.

Can I change loader size in Basic plan?

**Answer:** No, the customization section is only doable in premium plan. But you can decide the color of loader in [Basic and Standard plans](https://twinr.dev/pricing-plans/).

# Pull to Refresh ### What is Pull to Refresh? This extension gives the user ability to refresh the current page by swiping down from the top of the screen. ### How to setup pull to refresh?

**1.)** Go to Add-ons --> Extensions --> Pull to Refresh & Enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Select a loader color to match your brand color. **3.)** Save as a draft. ### How to test Pull to Refresh in [Twinr Previewer App](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer)? ### ![](/files/Hj2ApA3KHQoplvZaPz3W) Once you are done with the customization, open the app in previewer or refresh it from the floating hamburger button. You will be able to see the loader you have customized. ### Common Questions

Do I need to submit new version everytime I edit the refresh Loader?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to publish new version after enabling/disabling Pull to refresh?

**Answer:** No, enable/disable the loader, save it and click on publish to production. Your LIVE app will have the changes right away.

Why is the pull to refresh enabled by default?

**Answer:** Some applications add data while the user is scrolling down the page. It is always recommended to have the pull to refresh in this kind of app.

# Custom User Agent This features enables you to determine the origin of the browsing request of your end-user and finally decides to show the content as per the request. ### What is User Agent? A user-agent is like a digital ID card that your app carries with it when it talks to your website. It tells the website what kind of device your customers are using. If you want to identify that request is coming from your mobile app then you can set custom user-agent such as `twinr-app.` Now, this user-agent string will be passed to each request to your website and you can easily identify that request is coming from the mobile app. User-Agent String is contained in https headers with other info. A sample user-agent string for an iPhone using the Safari browser might look like this: `Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1` This string contains several pieces of information about the device and browser: * **"Mozilla/5.0"** is a standard prefix for user-agent strings that indicates the browser is compatible with the HTTP protocol used by the web. * **"iPhone; CPU iPhone OS 14\_4 like Mac OS X"** indicates that the device is an iPhone running the 14.4 version of the iPhone operating system. * **"AppleWebKit/605.1.15"** indicates that the browser is using the WebKit rendering engine, which is developed by Apple and used in Safari and other browsers. * **"Version/14.0.3"** indicates the version of the Safari browser. * **"Mobile/15E148"** indicates the mobile version of the browser * **"Safari/604.1"** indicates the browser type as Safari version 604.1 ### How to setup Custom User Agent?

**1.)** Go to Add-ons -> Extensions -> Custom User Agent & Enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Enter the User Agent String in the field. You can define separate agents for Android and iOS. **3.)** Enable the "Attach" option if you want to concatenate with the existing user-agent string. It will look like below. `Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1 Flow_app_agent` **4.)** Save as a draft. ### When should I use Custom User Agent? * When you want to manipulate whole app with different UI, JS for different devices. * If you want to use social media login feature from your website then you must setup Custom User-Agent to make it working. ### Common Questions

What kind of User-Agent string I can use?

You can use any kind of string for the User-Agent. Try to avoind any special characters.

# Custom Fonts ### What is Custom Fonts? Custom Fonts are all the fonts styles you see in native Twinr features like Hamburger Menu, Tab Name, Buttons, Navigation title etc. You might want to change it to match your Brand's theme. This gives very elegant look to your app. ### How to setup Custom Fonts?

{% tabs %} {% tab title="General" %} **1.)** Select the style from **1400+** diffferent font styles. **2.)** Save as a Draft. {% endtab %} {% endtabs %} ### How to test Custom Fonts in [Twinr Previewer App](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer)? Once you are done with the customization, open the app in previewer or refresh it from the floating hamburger button. You will be able to see the loader you have customized.\ \ See the Tab screens name changing the Font Style after refreshing.

### Common Questions

Do I need to submit new version everytime I edit the refresh Loader?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to publish new version after enabling/disabling Custom Fonts?

**Answer:** No, enable/disable the loader, save it and click on publish to production. Your LIVE app will have the changes right away.

Can I change font style in Standard plan?

**Answer:** No, it is only doable in Premium plan.

# Cache Policy ### What is Cache Policy? By defining cache policy, you can determine how an application should handle caching of data on the forward and backward navigations. Caching stores a copy of frequently accessed data/page locally on the device to improve performance and reduce the need to fetch the same data from a remote server repeatedly. ### How to setup Cache Policy? **1.)** Go to Add-ons -> Extensions -> Cache Policy. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Select from the 3 different strategies: * **Default mode:** No data/page will be cached in this strategy. If user will login to the app then it won’t store any session data. * **No Cache Policy:** Backward navigation will be cached but new page navigation will be always from the network. * **Cache else Network:** This strategy uses cached resources from both backward and new navigation when they are available and not expired, otherwise it will load resources from the network.\ **Note**: App cache expiration is based on your website's cache expiration time. # Dynamic Titles Dynamic Titles let you set navigation bar titles based on the app screen displayed.Define rules using expressions to ensure each screen shows a relevant title. By default, the Navigation Bar will display the Screen Name in the Text mode. Define rules to display other titles in the Navigation Bar on specific pages or groups of pages. {% hint style="danger" %} This will not take any effect if you are using Image Title in your navigation bar. More information -> [Navigation Bar Title](/screen-customization/tab-bar/navigation-bar/navigation-bar-title) {% endhint %}

## How to setup Dynamic Title? ### Enable Feature Go to Add-ons -> Extensions -> Dynamic & Enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. ### Add New Title Rule #### **URL Expression** In the URL Expression field, enter the specific part of the URL associated with the app screen you want to set a title for. ***Example***: Use /contact-us for a contact page. #### **Match Type** Select a match type from the Match as dropdown: * **Substring**: Matches the entered value if it’s part of the URL. * **Exact**: Matches only when the entire URL matches the entered value. * **Prefix:** Matches from the start of the URL. * **Suffix:** Matches from the end of the URL. #### Title Enter the desired title in the Title field. *Example*: For /contact-us, set the title to “Contact Us.” Once configured, click **Save As a Draft** to save your changes. # No Internet View What is No Internet View? When the user is using the application without internet connection, instead of showing the infinite loader, you can use our customized No Internet View screen. ## Enable No Internet Integration

## Customize it however you want ### **Header Image** Choose the main illustration displayed at the top of the No Internet screen. 1. **Select Image :** Pick from a set of professionally designed default images. 2. **Upload Image :** Upload your own custom illustration.\ Supported formats: PNG. JPG. PEG

### **Title** This section lets you customize the main heading displayed on the No Internet screen. #### **Fields:** * **Title** – Main text (required) * **Text Style** – Use predefined styles or choose **Custom** * **Font Size (px)** – Defines size in pixels * **Font Weight** – Regular / Medium / Bold * **Font Style** – Select from available font families * **Color** – Choose preset colors or apply a custom HEX value with opacity ![](/files/QrCkIWx2uIj4Xc2sOAEp) ![](/files/jjbXef6OU1Fxv6NjSxFR) ### **Description** Customize the explanatory text shown below the title. #### **Fields:** * **Description** – Required text explaining the issue * **Text Style** – Use default or custom * **Font Size (px)** – Adjust text size * **Font Weight** – Regular / Medium / Bold * **Font Style** – Choose any available font * **Color** – Theme-based or custom HEX value Use this to guide users clearly, e.g.: > "No internet connection found. Check your connection and try again." ![](/files/0gFelCZSOHP7Wu1eDEN9) ![](/files/rTeVPGbOcaZixHcBsjm3) ### **Button** Configure the action button displayed at the bottom of the No Internet screen. #### **Fields:** * **Button Text** – Label text (required) * **Button Style** – Choose from available button design presets This button usually performs a **Retry** action or reloads the screen when the user regains connection. ![](/files/rnbSBkN6jf7bC2AmnWDP) ![](/files/cVvc5Q91lC1MssRYvi3U) ### **Save Changes** Once customization is complete: * Click **Save As a Draft** if you want to save it but not publish yet * Click **Publish** to apply the No Internet View to your live app version # App Review ### What is App Review? Twinr provides a way through which App owners can prompt their App users to leave a feedback in the form of Reviews or Ratings. Those feedbacks directly appears on the PlayStore and AppStore listing. ### How to setup App Review?

**1.)** Go to Add-ons --> Extensions --> App Review & enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Provide App Review Schedule. The schedule starts from the day user installs the app. For example, if you want to prompt for the feedback on the 10th, 60th, 100th time user opens the app, then put 10, 60, 100 in the field. **3.)** Click on Save as Draft **NOTE:** As per the Apple and Google guidelines, you can prompt users for the review once in a month. So the gap between the schedules must be 30 days. If you put 1, 5, 10, 15, 35, 50, and for example user opens app everyday, then review will prompt on 1st and 35th day. The rest will be skipped. ### App Review JS Bridge App Review JS bridge is a customized way to ask for app review in your app. For example, on certain events in your app you want to ask for a review ignoring the app open count, you can use below JS Function to ask for the review. ```javascript await twinr_request_app_review() ``` You can use this function anywhere in your website and in the app it will ask for review as soon as this function will be called. You can call this function on events such as order placed in e-commerce app, course complete in education app etc. Also, you can add JS button in your navigation bar as well to always keep that button visible to users. Check [this guide](/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/custom-button) to learn more about adding JS button in navigation bar. ### How to test App Review Feature in [Twinr Previewer App](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer)? * You can test this feature for Twinr previewer app. You can also try to give reviews for the app. Please note that the reviews will go to [Twinr Previewer app](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer) in the PlayStore. * Another way is to install APK in your android device and try to open the app and give the reviews. NOTE that once the app is LIVE, you can test as per your schedule given in "App Review Schedule" field. ### Benefits of asking App Review for mobile app 1. **Increased number of installations:** As per the general psychology, when people search for some app, they likely to download the app which has more reviews than other. It leads to a trust and geniality of the app. 2. **Improved user retention:** If the user is very satisfied with your app, he will provide feedback and decide to keep the app for a longer period. 3. **Increase In-app revenue:** The more installation you have, the more revenue you can generate with either in-app purchase or Advertisements. 4. **Boost AppStore & PlayStore visibility:** The store's search algorithms works on different conditions. From which, one is number of ratings. The more ratings you have, the more visibility you get. 5. **Better conversion rate:** If the user provides feedback, he is likely to purchase goods, or purchase subscription from the app. Which leads to a successful conversion! ### Common Questions

Do I need to publish new version after enabling App Review?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to submit new version everytime I edit the review schedule?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

What are the policy and recommendations of Google and Apple to ask for reviews?

**Answer:** Please refer to this policies from them. For Google: \ For Apple:

# App Onboarding ### What is App Onboarding? App onboarding helps the end users to introduce your app at first place. It helps onboard the end user with product overview, important features or anything that helps user to get used to with the app ### How to setup App Onboarding? {% tabs %} {% tab title="Style" %} **1.)** Go to Add-ons --> Extensions --> App Onboarding & enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Select 1 from the 8 different styles. **3.)** Click on Next {% endtab %} {% tab title="Screen" %} **1.)** Click on "+ADD ONBOARDING SCREEN" to add screen **2.)** Add Title, Description, Image & Background color of the screen. **3.)** Click on Add. **4.)** Add as many screens as you want. {% endtab %} {% tab title="Customize" %} **Below are the customization options as per the style selected:** **Title**: This is the title of the screen **Description**: This is the description which appears under the title **Skip Button**: This button helps to skip the onboarding screens and directly go to first screen of the app. **Done Button**: This button appears on the last screen of onboarding. **Next Button**: This is on every screens which helps to go to the next screen. **Indicator**: These are on the bottom side of the screens. **Home Button**: This is the get started button which skips the onboarding and redirects to the application. **Bubble Customization**: Bubbles are in the bottom section of the screen. **Background Customization**: This is the background of the screen. {% endtab %} {% endtabs %} ### How to test App Onboarding Feature in [Twinr Previewer App](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer)? Once you are done with the customization, open the app in previewer or refresh it from the floating hamburger button. You will be able to see the onboarding.

### Benefits of using App Onboarding 1. Positive first impression 2. Long-term user retention 3. User engagement ### Common Questions

Do I need to submit new version everytime I edit the App Onboarding screens?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to publish new version after enabling App Onboarding?

**Answer:** No, enable/disable the onboarding, customize, save it and click on publish to production. Your LIVE app will have the changes right away.

# Multi Language Twinr allows the app owners to enable the multi language for their apps very elegantly. Twinr has the most effective way to auto translate the app content. ### How to setup Multi Language? {% tabs %} {% tab title="General" %} **1.)** Go to Add-ons --> Extensions --> Multi Language & enable it. **NOTE:** Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores. **2.)** Select languages from the 163 different in the list. **NOTE:** You can select upto 2 languages in Standard plan and upto 163 in Premium plan. You can test all languages in FREE Trial. \***If you choose the Standard plan after trial expires, we will keep first 2 selected languages and remove the rest.\*** **3.)** Select default language that you want to show. System language is your mobile phone's default language. **4.)** **Localized URL :** If you have local URLs for different languages, then you can set it up here for all tabs. When user changes the language to for example Arabic, the app will be refreshed with the "/ar" URL that you gave in localized URL.

**5.)** Click on Save as a Draft. {% endtab %} {% tab title="Translation" %} **1.)** Click on Download. It will download the excel file. **2.)** Open the file and only change or enter the translation words. **NOTE:** \ **-->** Do not update first Column and Row. It will not work otherwise.\ **-->** We auto translate the words in Premium plan. In Standard you have to enter the translation yourself.\ **-->** You can test the auto translation in FREE trial. \***If you choose the Standard plan after trial expires, we will remove those translated words. You have to go to document and update the translation words and re-upload the file.**\* **3.)** Once you are good with the changes, save the file and upload in the upload area of Twinr portal. **4.)** Save as a draft. {% endtab %} {% endtabs %} ### How to test Multi-language feature? **Step: 1** Save the changes\ **Step: 2** Click on publish to production from screens menu\ **Step: 3** Take a build.\ **Step: 4** For Android, install apk in phone and test it. For iOS, you can test in the testFlight once the new build is available. **NOTE** : You can **not** test this feature in preview app. ### Common Questions

Do I need to submit new version everytime I edit the translation?

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to publish new version after enabling Multi Language feature?

**Answer:** No, enable/disable the feature, customize, save it and click on publish to production. Your LIVE app will have the changes right away.

# In-App Purchase (IAP) In-app purchase (IAP) refers to the ability for users to purchase digital goods or services within an app. ### What is In-App purchase? In-app purchase (IAP) refers to the ability for users to purchase digital goods or services within an app. This can include things like virtual currency, additional features or content, or subscriptions to services. In-app purchases are typically made through the app store (such as Apple's App Store or Google Play), and the app developer receives a percentage of the revenue. This allows developers to offer their apps for free or at a lower cost, while still being able to generate revenue through in-app purchases. There are several types of in-app purchases, including: * **Consumable:** These are items that can be used up or expire over time and can be bought multiple times (e.g. in-game currency, items, or other virtual goods). * **Non-Consumable:** These are permanent items that can only be purchased once (e.g. unlocking a full version of an app or purchasing a permanent game character). * **Auto-renewable subscriptions:** This type of in-app purchase allows a user to subscribe to a service or content within an app on a recurring basis. * **Non-renewable subscriptions:** This type of in-app purchase allows a user to subscribe to a service or content within an app for a specific duration of time. ### How to setup In App Purchase? **1.)** Go to Add-ons --> Extensions --> In-App Purchase & enable it. **2.)** Enter **Response Submission URL:** This is webhook URL where we will submit success or error response of the purchases user will be doing in your app. Your URL must accept POST request and we will be submitting following information with the POST request. ```json { "twinr_product_id": "TWINR_PRODUCT_ID", "store_product_id": "STORE_PRODUCT_ID", "platform": "android or ios", "purchase_token": "PURCHASE_RECEIPT", "success": true //true or false, "user_info": "USERNAME", } ``` **3.)** Create IAP products on Android and iOS stores. Follow these documents for Android & iOS. {% content-ref url="/pages/SQifGAe3BiTLH1h5znu9" %} [iOS In-App Purchase (IAP)](/extensions/in-app-purchase-iap/ios-in-app-purchase-iap) {% endcontent-ref %} {% content-ref url="/pages/p3oLnwHUm4DcgSSBug02" %} [Android In-App Purchase (IAP)](/extensions/in-app-purchase-iap/android-in-app-purchase-iap) {% endcontent-ref %} **4.)** Click on `+Add` button to create your IAP product on Twinr.

* **Select product type** as per your requirements. It must match the type with the product created on your AppStore and PlayStore accounts. * **Android Product ID:** Enter product ID from your PlayStore product information page. * **iOS Product ID:** Enter product ID from your AppStore product information page. ![](/files/WPwwA4aQVyOwi1KR7qXQ) ![](/files/pZau9IrvJYcoNLbNV4Gc) **5.)** Once your product will be created, you will see one auto-generated Twinr ID to that product. You will require that product ID to start the purchase flow in your app.

**6.)** Now you have everything ready to setup IAP links on your website. There are two ways to set it up. * Custom URL * JS Function Below you can find the information for both of them in depth. {% tabs %} {% tab title="Custom URL" %} Custom URL is very easy to setup. We have designed one custom scheme URL to make this work easy for you. Here is how the URL is formatted. `inapppurchase://twinr.dev?product_id=TWINR_ID` In this URL you need to replace `TWINR_ID` with respected Twinr ID of your product. You can use this URL anywhere in your app to start purchase flow of that product. For exaple, you can create Hamburger Menu in your app and use this URL there to start a purchase flow. You need to create this kind of URL for each of your product and use it when you want to start purchasing. You can use this URL in your website as well, when that URL will be executed in the app, Twinr will automatically identify it and will start the purchase of that product respectively. {% endtab %} {% tab title="JS Function" %} JS Function(Twinr JS Bridge) is an another way to start purchase flow of your product. ```javascript twinr_iap_purchase('TWINR_ID'); ``` In this function, replace `TWINR_ID` with your product's Twinr ID. You can call this function anywhere in your website to start purchase of the designated product. {% endtab %} {% endtabs %} **7.) ****You cannot test IAP in the preview app.** To test it**,** Create a build of your app from App Build and request new builds. Use TestFlight app for iOS and APK file Android testing. Make sure you have added yourself as a testers to test on Android & iOS. Follow step 3 if you didn't invite yourself as a tester. # iOS In-App Purchase (IAP) iOS In-App Purchase (IAP) is a feature provided by Apple that allows app owners to sell digital content and services within their iOS apps. This can include things like subscriptions, premium features ## How to setup In App Purchase? ### Setup IAP agreements on your AppStore account. * Login to your [AppStoreConnect](https://appstoreconnect.apple.com/) account. * Go to [Agreements, Tax and Bankings](https://appstoreconnect.apple.com/agreements/#/) menu. ![](/files/2JbWuCIYk1eA93Q6rX3f) * Fill-up both Free and Paid agreements. Also fill up tax forms, banking information and Legal entity information. ![](/files/mhOvQngFtN5R0R0969VF) ### Create In-App Purchase Products There are 4 types of in-app purchases. * **Consumable:** These are items that can be used up or expire over time and can be bought multiple times (e.g. in-game currency, items, or other virtual goods). * **Non-Consumable:** These are permanent items that can only be purchased once (e.g. unlocking a full version of an app or purchasing a permanent game character). * **Auto-renewable subscriptions:** This type of in-app purchase allows a user to subscribe to a service or content within an app on a recurring basis. * **Non-renewable subscriptions:** This type of in-app purchase allows a user to subscribe to a service or content within an app for a specific duration of time. Check below 👇🏻 how you can create different type of products on AppStore. {% tabs %} {% tab title="Consumable & Non-Consumable" %} **1.)** Go to AppStoreConnect -> Your Application and click on In-App Purchases menu.

**2.)** Click on + icon to create a product. **3.)** Select appropriate type from the **Create an In-App Purchase** popup.

**4.)** Fill-up all the necessary information of the product such as pricing. For the testing purpose only pricing is required, you can fill-up other information when you are ready to go live.

{% endtab %} {% tab title="Auto-Renewable Subscriptions" %} **1.)** Go to AppStoreConnect -> Your Application and click on **Subscriptions** menu.

**2.)** Click on + button to create Subscription Group under **Auto-Renewable Subscriptions**.

**3.)** Go to your newly created subscription group. **4.)** Click on + button near Subscription to create a new subscription product. **5.)** Fill-up all the necessary information for that product. For the testing purpose only duration and pricing are required, you can fill-up other information when you are ready to go live.

{% endtab %} {% tab title="Non-Renewing Subscriptions" %} **1.)** Go to AppStoreConnect -> Your Application and click on **Subscriptions** menu.

**2.)** Click on **Manage** button under Non-Renewing Subscription section.

**3.)** Click on **+** button to create Non-Renewing Subscription.

**4.)** Fill-up all the necessary information for that product. For the testing purpose only pricing is required, you can fill-up other information when you are ready to go live.

{% endtab %} {% endtabs %} ### Create Sandbox User Account to Test IAP You will need to create Sandbox User if you want to test IAP in your app. Apple only allows Sandbox users to test IAPs. Follow below steps to create sandox account. **1.)** Go to AppStoreConnect -> Users and Access -> Sandbox Testers

**2.)** Click on + button create a Sandbox account. **3.)** Now in your iPhone, go to Settings -> App Store -> SANDBOX ACCOUNT. Login with your Sandbox account there. Logout if its shows any other account. ![](/files/ZXlVSPsUiLHIihbEz2DO) # Android In-App Purchase (IAP) Android In-App Purchase (IAP) is a feature provided by Android that allows app owners to sell digital content within their apps. This can include things like subscriptions, premium features. ## How to setup In App Purchase? ### Create In-App Purchase Products There are 4 types of in-app purchases. * **Consumable:** These are items that can be used up or expire over time and can be bought multiple times (e.g. in-game currency, items, or other virtual goods). * **Non-Consumable:** These are permanent items that can only be purchased once (e.g. unlocking a full version of an app or purchasing a permanent game character). * **Auto-renewable subscriptions:** This type of in-app purchase allows a user to subscribe to a service or content within an app on a recurring basis. * **Non-renewable subscriptions:** This type of in-app purchase allows a user to subscribe to a service or content within an app for a specific duration of time. {% tabs %} {% tab title="Consumable & Non-Consumable" %} Android doesn't differentiate between consumable & non-consumable products. You need to manage from your side if user can purchase one product single time or multiple times. **1.)** Go to Google Play Developer Console -> Select Your App -> Monetize -> In-app product.

**2.)** Click on **Create Product** button to create a product. Enter all the info and create a product. **3.)** Once you create it, Activate button will gets displayed with all the information you filled-up. Click on **Activate** to activate the product. This is required to test IAP.

{% endtab %} {% tab title="Subscriptions" %} Google provides very easy way to create Auto-Renewable and Non-Renewable subscriptions. Follow below steps. **1.)** Go to Google Play Developer Console -> Select Your App -> Monetize -> Subscriptions ![](/files/3yybnNmzxL5yYa5JCoCl) **2.)** Click on **Create Subscription** button to create a product. Enter all the info and create a product. ![](/files/WORYBClhuH2uyKsB9Pnr) **3.)** Once you create it, it will ask you to complete below tasks. ![](/files/Ka65S2U2LkcUTIIeSXv1) * **Add subscription benefits:** In this section you will need to enter all the subscription benefits, description and other info. * **Add a base plan:** First of all select your plan type. * **Auto-renewing:** Select this option if you want to create auto-renewable subscription. * **Pre-paid:** Select this option if you want to create non-renewable subscriptions * **Add offers:** Use this option if you want to enable offer for your subscription such as free trial. This steps is optional. * **Activate:** At last you need to activate your subscription to make it available for testing and prod users when you go live. {% endtab %} {% endtabs %} ### Create Licence User Accounts to Test IAP **1.)** Go to PlayStore Console -> Setup -> Licence Testing

**2.)** Enter comma separated email addresses under **Add licence testers** field and hit Enter. **3.)** Select **RESPOND\_NORMALLY** under **Licence response** dropdown. **4.)** Now, you need to prepare an APK and upload it under internal tester. To do that, go to PlayStore Console -> Select Your App -> Testing -> Internal testing.

**5.)** Click **Create a new release** button and upload your APK in there. Publish that release for review. **6.)** Next step is to join the testers program. To do so, click on Testers tab and then copy **Join on the web** URL. Open this URL in your browser and join the testers program.

**7.)** Now, you are ready to test IAP in your application. Install APK file in your mobile and test everything. # RevenueCat RevenueCat is a subscription management platform that simplifies in-app purchases across Android and iOS. Instead of handling store validation and subscription logic separately for each platform, RevenueCat acts as a centralized backend layer over: * Google Play Billing (Android) * Apple StoreKit (iOS) Twinr integrates directly with RevenueCat to help you: * Manage subscriptions across platforms * Validate receipts securely * Track subscription lifecycle events * Simplify purchase implementation * Access analytics and reporting ## When Should You Use RevenueCat? RevenueCat is recommended if: * You offer subscriptions (monthly, yearly, etc.) * You support both Android and iOS * You want centralized subscription control * You need subscription analytics * You want easier lifecycle management (renewals, cancellations, upgrades) If you only need simple one-time purchases, native IAP may be sufficient. ## Prerequisites Before configuring RevenueCat in Twinr, ensure: 1. Your app is created in: * Google Play Console * Apple App Store Connect 2. In-app products or subscriptions are already created in the respective store. 3. A RevenueCat account is created. ## Step-by-Step Setup Guide ### Step 1: Create a RevenueCat Account 1. Go to: 2. Sign up or log in. 3. Create a **New Project**. 4. Add both: * Android App * iOS App ### Step 2: Connect Stores to RevenueCat Inside RevenueCat dashboard: #### For Android: * Connect Google Play Console * Sync your products #### For iOS: * Connect App Store Connect * Sync your subscription products {% hint style="info" %} Products must exist in the stores before adding them to RevenueCat. {% endhint %} ### Step 3: Configure Products & Entitlements 1. Go to **Products** 2. Import or create products 3. Create **Entitlements** (e.g., Premium Access) 4. Attach products to entitlements 5. Create an **Offering** 6. Set the offering as **Current** This step defines what users unlock after purchase. ### Step 4: Get RevenueCat API Keys Inside RevenueCat: 1. Go to **Project Settings** 2. Copy: * **Public SDK Key (Android)** * **Public SDK Key (iOS)** These keys will be used in Twinr. ## Configure RevenueCat in Twinr 📍 Go to: **Twinr Builder → Add-Ons → In-App Purchase** 1. Enable **In-App Purchase** 2. Select **Purchase Provider → RevenueCat** 3. Enter: * Android API Key (RevenueCat Public SDK Key) * iOS API Key (RevenueCat Public SDK Key) 4. Click **Save As Draft** 5. Publish to Production Once published, RevenueCat integration becomes active. ## How It Works 1. User initiates purchase in the app. 2. Store processes payment. 3. RevenueCat validates the receipt. 4. RevenueCat updates subscription status. 5. Twinr unlocks the entitlement for the user. All lifecycle events such as renewals, cancellations, and expirations are handled automatically. ## Testing RevenueCat Integration Before going live: * Use sandbox test accounts. * Verify entitlement activation. * Test subscription renewal. * Test cancellation behavior. * Confirm subscription expiration flow. ## Important Notes * Products must match exactly between: * Store * RevenueCat * The offering must be marked as **Current** * Always test in sandbox mode before production release * RevenueCat integration is available only for Premium plan customers # Paywall Integration ### Overview Twinr allows you to integrate RevenueCat’s Paywall system directly into your app. Using Twinr’s JavaScript bridge functions, you can: * Present a RevenueCat paywall * Show paywall only if entitlement is missing * Restore previous purchases * Trigger paywall from custom HTML buttons This integration works only when: * RevenueCat is selected as Purchase Provider * RevenueCat API keys are configured * The app is published ## Part 1: Configure Paywall Setup Before using Twinr bridge functions, you must configure RevenueCat properly. If using RevenueCat’s Hosted Paywall: 1. Go to **Paywalls** 2. Create a new Paywall 3. Attach it to your Offering 4. Customize: * Layout * Branding * Pricing display 5. Publish Paywall Now the paywall is ready to be triggered via Twinr. ## Part 2: Paywall Trigger Functions (Twinr Bridge) All calls must use: ``` window.flutter_inappwebview.callHandler(...) ``` *** ## Available Paywall Functions *** ### 1️⃣ Present Paywall Displays the offering paywall. ``` window.flutter_inappwebview.callHandler( 'iapPresentPaywall', 'default' ); ``` `default` = Offering Identifier *** ### 2️⃣ Present Paywall If Needed Shows paywall only if entitlement is not active. ``` window.flutter_inappwebview.callHandler( 'iapPresentPaywallIfNeeded', 'premium_access', 'default' ); ``` Parameters: * `premium_access` → Entitlement Identifier * `default` → Offering Identifier *** ### 3️⃣ Restore Purchase Required especially for iOS compliance. ``` window.flutter_inappwebview.callHandler( 'iapRestorePurchase' ); ``` No parameters required. # Deeplink Enhance user engagement and streamline their experience, making your app more efficient and user-friendly. Elevate your app's performance with Deep Linking! ### What is Deeplink? Deeplinks are a type of links that send users directly to an app instead of a web browser. ### How to setup Deeplink? There are **two types** of deeplinks. {% tabs %} {% tab title="Custom links" %} These are the URLs with custom scheme. **1.)** Go to Add-ons--> Extension **2.)** Enable the toggle **3.)** Click on

**4.)** In the Scheme box, specify the prefix you use for your URLs.\ For example if you have URL: twinr://ecommercely.twinr.site then enter "twinr" **Note:** Please don't include "://" after the scheme **5.)** In the Domain box, specify your domain only.\ For example if you have URL: twinr://ecommercely.twinr.site then enter "ecommercely.twinr.site" ![](/files/0uzhryuyzdXBOmuQ5fU5) {% endtab %} {% tab title="Https links" %} These are the URLs with https scheme. This feature is included in premium plan only. **Android:**\ **1.)** To be able to set the https links, you must complete below two. * Android package name. Check [this](/publish-apps/publishing-to-the-google-play-store/setup-android-signing-information#step-1-android-package-name) to see how to set up * Build signing information. Check [this](/publish-apps/publishing-to-the-google-play-store/setup-android-signing-information#step-3-setup-signing-info) to see how to set up. **iOS:**\ **1.)** To be able to set the https links, you must complete below two. * iOS Bundle id. Check [this](/publish-apps/publishing-to-the-apple-app-store/create-your-apple-bundle-id) to see how to set up * Build signing information. Check [this](/publish-apps/publishing-to-the-apple-app-store/setup-ios-signing-info) to see how to set up. **2.)** Once you complete these steps, **assetlinks.json** file for Android and **apple-app-site-association** file for iOS will be created and ready to download. Download that file. **3.)** Go to your server's root folder and upload the json file under ".well-known" directory. **4.)** Click on

**5.)** In the Domain box, specify your domain only.\ For example if you have URL: then enter "ecommercely.twinr.site" {% endtab %} {% endtabs %} ### Benefits of using Deeplink 1. Enhance app discoverability 2. Increase downloads and retention 3. User engagement ### Common Questions

Do I need to submit new version everytime I edit the Deeplink?

**Answer:** Yes, you need to add new configuration and publish new build to both stores.

Do I need to publish new version after enabling Deeplink?

**Answer:** Yes

--- [Next Page](/llms-full.txt/1)