Restore pages with links from product

Author: eandreeva-twr

src/content/docs/guides/flow-builder/flow-timer.mdx

@@ -0,0 +1,38 @@
+---
+title: "Countdown timer"
+description: "Add a countdown timer to a paywall."
+metadataTitle: "Countdown timer | Flow Builder | Adapty Docs"
+---
+
+import ZoomImage from '@site/src/components/ZoomImage';
+
+<ZoomImage id="countdown-timer-selected.webp" width="700px" alt="Countdown timer selected on the canvas with the Countdown panel and Behavior dropdown visible" />
+
+The **Countdown timer** counts down from a fixed duration to zero — once it reaches zero, the display freezes.
+
+## Templates
+
+<ZoomImage id="countdown-templates.webp" width="200px" alt="Countdown timer templates" float="left" />
+
+The category provides four visual variants:
+
+- **Blocks** — Days, hours, minutes, and seconds in separate labeled cells.
+- **Inline Units** — Single-line text with unit suffixes
+- **Inline** — Pure digits
+- **Badge** — A pill-shaped digit display.
+
+## Settings
+
+<ZoomImage id="builder-countdown-settings.webp" width="300px" float="right" alt="Countdown timer settings in the right panel" />
+
+### Set the duration
+
+In the **Countdown** section of the right panel, enter the starting duration in days, hours, minutes, and seconds.
+
+### Configure the behavior
+
+The **Behavior** dropdown controls when the timer starts:
+
+- **Every appear** — Restarts every time the user opens the screen. Default.
+- **First appear** — Starts on the user's first screen view in the current app session. Keeps counting if they return during the same session; resets on a fresh app launch.
+- **First appear (persisted)** — Starts on the user's first screen open and keeps counting across app launches.

src/content/docs/guides/flow-builder/using-custom-fonts-in-flow-builder.mdx

@@ -0,0 +1,62 @@
+---
+title: "Custom fonts in the Flow Builder"
+description: "Upload and use custom fonts in the Flow Builder."
+metadataTitle: "Custom fonts | Flow Builder | Adapty Docs"
+---
+
+import Zoom from 'react-medium-image-zoom';
+import 'react-medium-image-zoom/dist/styles.css';
+
+When building flows, you might want to use a custom font to match the rest of your app. Here's how to add custom fonts and use them in your flows.
+
+:::tip
+[Configure fonts](onboarding-text) in the **Styles** panel before you start designing the flow. This way, any changes you make will apply globally.
+:::
+
+## Built-in fonts
+
+When you create a flow in the Builder, Adapty uses a system font by default. This usually means SF Pro on iOS and Roboto on Android, though it can vary depending on the device. You can also choose from commonly used fonts like Arial, Times New Roman, Courier New, Georgia, and Helvetica. Each of these fonts comes with a few style options.
+
+These fonts are not supplied as part of the Adapty SDK and are only used for preview purposes. We cannot guarantee they will work perfectly on all devices. However, in our testing, these fonts are typically recognized by most devices without any additional effort on your part. You can also [check out which fonts are available by default on iOS](https://developer.apple.com/fonts/system-fonts/).
+
+
+<ZoomImage id="use-fonts.webp" width="500px" alt="Built-in fonts" />
+
+## Add a custom font
+
+If you need more than what’s offered by default, you can add a custom font.
+
+To add a custom font:
+
+1. Choose **Upload new font** in any of the font dropdowns.
+
+<ZoomImage id="upload-new-font.webp" width="300px" alt="Add custom font" />
+
+2. In the **Add custom font** window, fill in the following fields:
+
+   - **Font name in Builder**: Enter a display name for the font. This name will appear in font dropdowns across the Builder.
+   - **iOS font name**: Enter the PostScript name of the font. You can find it in Font Book → PostScript name, or through the [`UIFont` API](https://developer.apple.com/documentation/uikit/uifont).
+   - **Android font name**: Enter the file name from `res/font/`. Use only lowercase letters, numbers, and underscores.
+   - **Font file**: Drag and drop the font file or click **Select files**. Supported formats: `.ttf`, `.otf`, `.woff`, `.woff2`.
+
+3. Click **Save font**.
+
+   <ZoomImage id="add-custom-font-window.webp" width="300px" alt="Add custom font window" />
+
+:::warning
+The font file you upload is not sent to the device; it’s only used for preview. Our SDK receives only the strings referencing the font to use while rendering the paywall. Therefore, you must include the same font file in the app bundle and provide the correct platform-specific font names for everything to work smoothly. Don’t worry, it won’t take much time.
+:::
+
+By uploading the font file to Adapty, you’re confirming that you have the right to use it in your app.
+
+
+## Add the font files to your app's bundle
+
+If you’re already using a custom font elsewhere in your app, you just need to add your paywall fonts in the same way. If not, make sure to include the font file in your app's project and bundle. Read how to do it below:
+
+- On iOS: [In Apple official documentation](https://developer.apple.com/documentation/uikit/adding-a-custom-font-to-your-app)
+- On Android: [In Android official documentation](https://developer.android.com/develop/ui/views/text-and-emoji/fonts-in-xml)
+
+:::important
+When downloading font bundles, you'll receive all font variations in an archive. Only add the specific font files your paywall uses to your app bundle to minimize app size. For example, if you only use `OpenSans-Regular.ttf` in your paywall, don't include `OpenSans-Bold.ttf` in your app bundle.
+:::

src/content/docs/version-3.0/custom-media-paywall-builder.mdx

@@ -0,0 +1,54 @@
+---
+title: "Custom images and video in Paywall Builder"
+description: ""
+metadataTitle: ""
+---
+
+import Zoom from 'react-medium-image-zoom';
+import 'react-medium-image-zoom/dist/styles.css';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Contentid from '@site/src/components/InlineTooltip';
+import InlineTooltip from '@site/src/components/InlineTooltip';
+
+You can set up any image or video on a paywall, but sometimes you might want to display a custom image or video that’s personalized for the user — for example, a video with their chosen avatar. That’s where custom media comes in.
+
+Custom media is an image or video that your app calls by ID from your code. It replaces a standard media file you’ve added to the paywall in the Paywall Builder.
+
+:::info
+To use this feature, update the Adapty SDK to version 3.7.0 or later.
+:::
+
+## Where can I use custom media?
+
+Anywhere you’d normally use a regular image or video:
+
+- As a hero image
+- As a hero video
+- As a regular icon
+- In a card background
+- In a carousel background
+
+## How to use custom media?
+To set up custom media:
+
+1. Select the **Use custom media ID** checkbox under the upload area.
+
+2. Enter the media ID. For hero images and hero videos, IDs are predefined.
+
+3. Upload a fallback image or video in the file upload section.
+
+4. For more information, see <InlineTooltip tooltip="the guides on how to fetch Paywall Builder paywalls in your app">[iOS](get-pb-paywalls.md), [Android](android-get-pb-paywalls.md), [React Native](react-native-get-pb-paywalls.md), [Flutter](flutter-get-pb-paywalls.md), and [Unity](unity-get-pb-paywalls.md)</InlineTooltip> and call the media by its ID in your code.
+
+If the Adapty SDK version is below 3.7.0, or if the custom media ID isn't defined in your code, the fallback image or video will be displayed instead.
+
+<Zoom>
+     <img src={require('./img/custom-media.png').default}
+     style={{
+       border: '1px solid #727272', /* border width and color */
+       width: '700px', /* image width */
+       display: 'block', /* for alignment */
+       margin: '0 auto' /* center alignment */
+     }}
+   />
+</Zoom>