# Global Blocks in LanderLab: Build Once, Update Everywhere Source: https://docs.landerlab.io/add-global-block Learn what global blocks are in LanderLab and how to reuse navbars, footers, and CTAs across every landing page. Edit once and update all pages instantly. Global blocks let you build a block one time and reuse it across as many landing pages as you want. Because the block stays global, any change you make to the original updates every page it appears on automatically. There is no need to edit each page by hand. Global blocks stay connected across pages. Editing the original updates every copy instantly. This is different from saving a section as a component, where each copy is independent and changes are not shared. ## What are global blocks? A global block is a reusable block, like a navbar or footer, that you design once and place on multiple pages. Every instance points back to the same source, so the content, links, and styling stay in sync everywhere. When you update the source block, for example changing a link in your navbar, that update applies to every page that uses it. You never have to open each page and change it manually. ## Why use global blocks * **Edit once, update everywhere.** Change a link or a line of text in one place and every page updates automatically. * **Consistency across pages.** Navigation, links, and messaging stay identical on every landing page. * **Faster workflow.** Reuse the same building blocks instead of rebuilding or copy-pasting them for each new page. * **Fewer mistakes.** One source of truth means no broken or outdated links left behind on older pages. ## Common use cases Global blocks work best for anything that should look and behave the same across every page. **Navigation and structure** * **Navbar.** Keep the same menu, logo, and links on every page. Update one link and it changes everywhere. * **Footer.** Maintain consistent contact details, social links, and legal links across your whole site. **For media buyers and performance marketers** * **Offer CTA blocks.** Reuse the same call-to-action section across a campaign. When you rotate or swap an offer, update the link once and every landing page points to the new offer instantly. * **Compliance and legal blocks.** Keep advertiser disclosures, privacy links, and terms consistent across every page. When a network or regulation requires a wording change, update it in one place. * **Promo and announcement bars.** Run the same limited-time offer or announcement across all pages, then update or remove it everywhere at once when the promotion ends. * **Trust blocks.** Reuse testimonial rows, review badges, or partner logos so every page in a funnel carries the same social proof. For affiliate and paid traffic campaigns, put your offer link inside a global block. Swapping offers later becomes a one-click change across every page instead of a manual edit on each lander. Editing a global block changes it on every page where it appears. If you need a one-off version for a single page, use a regular saved component instead so your change stays local to that page. # LanderLab API Overview Source: https://docs.landerlab.io/api-overview Learn how the LanderLab REST API works, how to authenticate, and what resources you can manage programmatically, from landing pages and leads to A/B testing and analytics. The LanderLab API gives you programmatic access to your entire account. You can create and publish landers, pull lead data, read analytics, manage A/B test variants, configure integrations, and more, all over HTTP. If you prefer working in plain English instead of writing raw API calls, the [MCP server](/mcp/overview) connects your AI assistant directly to LanderLab using the same underlying API. It signs in with your LanderLab account, so no API key is needed. ## Base URL All API requests go to: ```text theme={null} https://api.landerlab.dev ``` The current API version is **v2**. Every endpoint is prefixed with `/api/v2/`. ## Authentication The API uses API key authentication. Include your key in the `X-API-Key` header on every request. ```text theme={null} X-API-Key: ll_live_YOUR_KEY_HERE ``` Your key starts with `ll_live_` and is tied to your organization. All requests are scoped to the organization the key belongs to, so you do not need to pass an organization ID separately in most calls. API keys are shown only once at creation. If you lose yours, you need to generate a new one. See [Generate an API Key](/mcp/generate-api-key) for steps. ### Error responses All endpoints return standard HTTP status codes. | Code | Meaning | | ----- | ------------------------------------------------------ | | `200` | Success | | `400` | Bad request (invalid parameters or plan limit reached) | | `401` | Unauthorized (missing or invalid API key) | | `403` | Forbidden (key does not have access to this resource) | | `404` | Not found | Error responses include an `error` string in the response body with a description of the problem. ## Resource Groups The API is organized around the following resource groups. Each group maps to a section in the API reference. ### Workspaces List, create, and rename workspaces within your organization. Workspaces are the top-level container for landers, leads, and domains. | Endpoint | Description | | --------------------------------------------------------------- | ------------------- | | `GET /api/v2/organizations/{organizationId}/workspaces/get` | List all workspaces | | `POST /api/v2/organizations/{organizationId}/workspaces/create` | Create a workspace | | `POST /api/v2/workspaces/{workspaceId}/rename` | Rename a workspace | ### Landers Manage landing pages: list, create, rename, publish, unpublish, and delete. Publishing requires a domain and path and will return a `400` if plan limits are exceeded or the path is already taken. | Endpoint | Description | | ------------------------------------------------------ | ------------------------------------ | | `GET /api/v2/workspaces/{workspaceId}/landers/get` | List landers in a workspace | | `POST /api/v2/workspaces/{workspaceId}/landers/create` | Create a lander | | `POST /api/v2/landers/{landerId}/publish` | Publish a lander | | `POST /api/v2/landers/{landerId}/unpublish` | Unpublish a lander | | `DELETE /api/v2/landers/{landerId}` | Delete a lander and all its variants | Deleting a lander removes all associated variants, files, and integrations permanently. ### A/B Testing (Variants) Each lander has one or more variants. The master variant is the one that receives traffic when A/B testing is off. When A/B testing is enabled, traffic is split across variants according to the weights you set. | Endpoint | Description | | ---------------------------------------------------- | --------------------------- | | `GET /api/v2/landers/{landerId}/variants` | List all variants | | `POST /api/v2/variants/{variantId}/clone` | Clone a variant | | `POST /api/v2/landers/{landerId}/ab-testing/enable` | Enable A/B testing | | `POST /api/v2/landers/{landerId}/ab-testing/disable` | Disable A/B testing | | `POST /api/v2/landers/{landerId}/ab-testing/weights` | Set traffic split weights | | `POST /api/v2/variants/{variantId}/set-master` | Promote a variant to master | | `DELETE /api/v2/variants/{variantId}` | Delete a variant | You cannot delete the master variant. Promote a different variant to master first. ### Editor Load and save the HTML content and settings for a specific variant. Saving HTML handles base64 image extraction and versioning automatically. | Endpoint | Description | | --------------------------------------------------- | --------------------------------------------------- | | `GET /api/v2/variants/{variantId}/editor/load` | Load HTML, settings, forms, and metadata | | `POST /api/v2/variants/{variantId}/editor/save` | Save HTML content | | `POST /api/v2/variants/{variantId}/editor/settings` | Save variant settings (integrations, SEO, tracking) | ### Leads Pull leads at workspace or organization level. Leads are paginated and can be filtered by date range, status (`complete` or `partial`), lander, and search query. The maximum page size is 1000 per request. | Endpoint | Description | | ------------------------------------------------------ | ---------------------------------------- | | `GET /api/v2/workspaces/{workspaceId}/leads/get` | List leads for a workspace | | `GET /api/v2/organizations/{organizationId}/leads/get` | List leads across the organization | | `GET /api/v2/landers/{landerId}/lead-schema` | Get the JSON Schema for a lander's leads | | `POST /api/v2/landers/lead-schema` | Get the JSON Schema for multiple landers | The lead schema endpoints return a [Draft-07 JSON Schema](https://json-schema.org/specification-links#draft-7) describing all possible fields a lead from that lander can contain, including form fields, quiz answers, system fields, and integration fields. ### Analytics A single flexible endpoint covers all analytics needs. Filter by workspace, lander, or variant. The most specific filter wins: if you pass `variantIds`, workspace and lander filters are ignored. | Endpoint | Description | | ----------------------------------------------------------- | -------------------------------------------------------------- | | `POST /api/v2/organizations/{organizationId}/analytics/get` | Get analytics with date range, timezone, and optional group-by | **Required parameters:** `startDate`, `endDate`, `timezone` (IANA format, e.g. `America/New_York`). **Optional filters:** `workspaceIds`, `landerIds`, `variantIds`. **Group by:** `date`, `lander`, `variant`, or `workspace`. Defaults to `date`. ### Domains List domains at workspace or organization level. | Endpoint | Description | | -------------------------------------------------------- | ---------------------------------------- | | `GET /api/v2/workspaces/{workspaceId}/domains/get` | List domains in a workspace | | `GET /api/v2/organizations/{organizationId}/domains/get` | List all domains across the organization | ### Folders Organize landers into folders within a workspace. | Endpoint | Description | | ------------------------------------------------------ | ---------------- | | `GET /api/v2/workspaces/{workspaceId}/folders` | List all folders | | `POST /api/v2/workspaces/{workspaceId}/folders/create` | Create a folder | | `POST /api/v2/folders/{folderId}/rename` | Rename a folder | ### Integrations Create and list org-level integrations, then enable or disable them per lander. OAuth-based integrations (Mailchimp, HubSpot, Google Sheets, AWeber) require an interactive OAuth flow and cannot be created via the API directly. | Endpoint | Description | | ----------------------------------------------------------------- | ----------------------------------- | | `GET /api/v2/organizations/{organizationId}/integrations` | List all integrations | | `POST /api/v2/organizations/{organizationId}/integrations/create` | Create an integration | | `POST /api/v2/lander-integrations/{id}/enable` | Enable a lander integration | | `POST /api/v2/lander-integrations/{id}/disable` | Disable a lander integration | | `DELETE /api/v2/lander-integrations/{id}` | Remove an integration from a lander | ## OpenAPI Spec and Interactive Docs The full OpenAPI 3.1 spec is available at: ```text theme={null} https://backend-v2.landerlab.workers.dev/api/v2/openapi.json ``` Interactive API documentation (with a built-in request tester) is at: ```text theme={null} https://api.landerlab.dev/api/v2/docs ``` ## Using the API with an AI Assistant (MCP) If you want to manage your LanderLab account using plain English instead of writing API calls, the LanderLab MCP server is built on the same API and exposes 30+ tools to any MCP-compatible AI assistant, including Claude, ChatGPT, Cursor, and Windsurf. The MCP server URL is: ```text theme={null} https://api.landerlab.dev/mcp ``` It authenticates through a browser sign-in rather than the `X-API-Key` header, so no API key is required. See [Connect AI Assistants via MCP](/mcp/overview) for setup instructions. # Clone a variant (create new A/B test variant) Source: https://docs.landerlab.io/api-reference/ab-testing/clone-a-variant-create-new-ab-test-variant https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/create Create a new variant by cloning an existing one. The new variant is a copy of the source `variantId` with a new name. Use this to create variants for A/B testing. # Delete variant Source: https://docs.landerlab.io/api-reference/ab-testing/delete-variant https://backend-v2.landerlab.workers.dev/api/v2/openapi.json delete /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/{variantId}/delete Delete a variant. Fails if the variant is the master variant — promote a different variant to master first via setMaster. # Disable A/B testing Source: https://docs.landerlab.io/api-reference/ab-testing/disable-ab-testing https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/disable Turn off multi-variant traffic splitting; only the master variant will receive traffic. # Enable A/B testing Source: https://docs.landerlab.io/api-reference/ab-testing/enable-ab-testing https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/enable Turn on multi-variant traffic splitting for the lander. # Get variant settings Source: https://docs.landerlab.io/api-reference/ab-testing/get-variant-settings https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/{variantId}/settings Returns the settings for a single variant. Fetched on demand when the settings panel is opened, rather than shipped with the full lander list. # List variants Source: https://docs.landerlab.io/api-reference/ab-testing/list-variants https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/get Returns all variants for a lander. # Set master variant Source: https://docs.landerlab.io/api-reference/ab-testing/set-master-variant https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/{variantId}/setMaster Promote this variant to be the master variant of its lander. If A/B testing is disabled, weights collapse to 100% on the new master. # Set variant weights (A/B traffic split) Source: https://docs.landerlab.io/api-reference/ab-testing/set-variant-weights-ab-traffic-split https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/variants/setWeights Set the traffic distribution weights across variants. Weights must sum sensibly (typically to 100). # Get current context Source: https://docs.landerlab.io/api-reference/account/get-current-context https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/me Returns the organization and workspaces this API key can access. Call this first to discover the organizationId and workspaceIds required by the other endpoints. # Get unified analytics Source: https://docs.landerlab.io/api-reference/analytics/get-unified-analytics https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/organizations/{organizationId}/analytics/get Flexible analytics endpoint scoped to the organization. Filter by any combination of workspaceIds, landerIds, or variantIds. The most-specific filter wins (variantIds > landerIds > workspaceIds). Returns aggregate totals plus a breakdown grouped by date / lander / variant / workspace. # Reset lander analytics Source: https://docs.landerlab.io/api-reference/analytics/reset-lander-analytics https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/analytics/reset Sets the analytics reset point for a lander and all of its variants. Visits, clicks, conversions and lead counts recorded before this moment are excluded from analytics. Leads remain visible in the leads list. # Clone component Source: https://docs.landerlab.io/api-reference/components/clone-component https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/components/{componentId}/clone Duplicate a global component. The clone gets a fresh id and its scoped CSS is re-scoped to it. # Create component Source: https://docs.landerlab.io/api-reference/components/create-component https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/components/create Create a new global component in the workspace. # Delete component Source: https://docs.landerlab.io/api-reference/components/delete-component https://backend-v2.landerlab.workers.dev/api/v2/openapi.json delete /api/v2/workspaces/{workspaceId}/components/{componentId}/delete Soft delete a global component. Existing instances keep their last snapshot and stop receiving updates. # Get component Source: https://docs.landerlab.io/api-reference/components/get-component https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/components/{componentId}/get Returns a single global component by id. # Get component version Source: https://docs.landerlab.io/api-reference/components/get-component-version https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/components/{componentId}/versions/{versionId}/get Returns a single component version including its content and css. # List component versions Source: https://docs.landerlab.io/api-reference/components/list-component-versions https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/components/{componentId}/versions/get Returns the version history of a global component, newest first, without content. # List components Source: https://docs.landerlab.io/api-reference/components/list-components https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/components/get Returns all global components in the workspace, newest first, including content and css. # Move component to another workspace Source: https://docs.landerlab.io/api-reference/components/move-component-to-another-workspace https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/components/{componentId}/move-to-workspace Move a global component to another workspace in the same organization. Only allowed when the component is not used on any lander. # Restore component version Source: https://docs.landerlab.io/api-reference/components/restore-component-version https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/components/{componentId}/versions/{versionId}/restore Restore the content and css of a global component from a version. The restored state is saved as a new version. # Update component Source: https://docs.landerlab.io/api-reference/components/update-component https://backend-v2.landerlab.workers.dev/api/v2/openapi.json patch /api/v2/workspaces/{workspaceId}/components/{componentId}/update Partially update a global component. Only the provided fields are applied. # List organization domains Source: https://docs.landerlab.io/api-reference/domains/list-organization-domains https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/domains/get Returns all domains across the organization with published lander counts and workspace info. # List workspace domains Source: https://docs.landerlab.io/api-reference/domains/list-workspace-domains https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/domains/get Returns all domains assigned to the workspace. # Delete a variant file Source: https://docs.landerlab.io/api-reference/editor/delete-a-variant-file https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/deleteFile Delete a single file from the variant (the variants/unpublished R2 scope). # Discard unpublished changes Source: https://docs.landerlab.io/api-reference/editor/discard-unpublished-changes https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/discardChanges Overwrite the variant's draft state (files, settings, quizzes) with its live published state, discarding all unpublished changes. Returns 400 if the lander is not published or has no published files for this variant. # Get AI translation job status Source: https://docs.landerlab.io/api-reference/editor/get-ai-translation-job-status https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/editors/{variantId}/translate/jobs/{jobId} Status of a translation job started with translate/page. `variantId` is the id of the variant being translated (returned by translate/page). `pending` while the job runs, then `success` with the agent's summary and the version it produced, or `failed` with an error reason. # Get AI translation status Source: https://docs.landerlab.io/api-reference/editor/get-ai-translation-status https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/editors/{variantId}/translate/status Status of the most recent AI translation started for this variant: generating, finished or canceled, the agent's closing summary, and the version it produced. # List variant files Source: https://docs.landerlab.io/api-reference/editor/list-variant-files https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/editors/{variantId}/files List the relative paths of all files stored for a variant (the variants/unpublished R2 scope). Use loadFile to fetch a specific file's content. # Load editor HTML Source: https://docs.landerlab.io/api-reference/editor/load-editor-html https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/editors/{variantId}/load Load the HTML content, settings, forms, and metadata for a variant in the editor. # Read a variant file Source: https://docs.landerlab.io/api-reference/editor/read-a-variant-file https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/editors/{variantId}/loadFile Return the text content of a single file stored for the variant (the variants/unpublished R2 scope). # Rename a variant file Source: https://docs.landerlab.io/api-reference/editor/rename-a-variant-file https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/renameFile Rename/move a single file within the variant (the variants/unpublished R2 scope). Updates the index file reference when the entry file is renamed. # Save editor HTML Source: https://docs.landerlab.io/api-reference/editor/save-editor-html https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/save Save HTML content for a variant. Handles base64 image extraction, gallery cloning, and versioning automatically. # Save variant settings Source: https://docs.landerlab.io/api-reference/editor/save-variant-settings https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/saveSettings Save settings (integrations, tracking, SEO, etc.) for a variant. # Translate a whole page with AI Source: https://docs.landerlab.io/api-reference/editor/translate-a-whole-page-with-ai https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/translate/page Start a durable AI translation job for the variant's saved draft. The agent rewrites every user-visible string in the page files into the target language and updates the page language, title and SEO settings. `destination` picks where the translation lands: `this_variant` edits the variant in place, `new_variant` clones it into a new variant of the same lander first, `new_lander` clones the whole lander and translates the matching variant there; `name` names the new variant or lander. Returns 202 with a `jobId` and the id of the variant being translated; the job runs to completion regardless of the client and cannot be cancelled. Poll translate/jobs/{jobId} on that variant until its status is success or failed, then reload the variant. # Unpublished changes diff Source: https://docs.landerlab.io/api-reference/editor/unpublished-changes-diff https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/editors/{variantId}/changes Compare the variant's draft state (files, settings, quizzes, A/B traffic weights) against its live published state and return a git-like diff: added, modified and deleted entries, with unified hunks and per-line changes for text content. Returns 400 if the lander is not published or has no changes to be published. # Upload a variant file Source: https://docs.landerlab.io/api-reference/editor/upload-a-variant-file https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/uploadFile Upload a single binary or text file for the variant as multipart/form-data. Best option for large files (up to 20 MB). # Upload a variant file as base64 Source: https://docs.landerlab.io/api-reference/editor/upload-a-variant-file-as-base64 https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/uploadFileBase64 Store a base64-encoded file under the given path in the variant. Intended for small files (up to 5 MB decoded); for larger files use uploadFileFromUrl or the multipart uploadFile endpoint. Returns the stored file path and its CDN URL. # Upload a variant file from a URL Source: https://docs.landerlab.io/api-reference/editor/upload-a-variant-file-from-a-url https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/uploadFileFromUrl Download a file from a public http(s) URL server-side and store it under the given path in the variant (up to 20 MB). Returns the stored file path and its CDN URL. # Write a variant file Source: https://docs.landerlab.io/api-reference/editor/write-a-variant-file https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/editors/{variantId}/saveFile Create or overwrite a single text file (HTML/CSS/JS) for the variant. For the main page HTML prefer the /save endpoint, which also handles base64 image extraction, search indexing and preview sync. # Create folder Source: https://docs.landerlab.io/api-reference/folders/create-folder https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/folders/create Create a new folder in the workspace, optionally nested inside a parent folder. Fails if a sibling folder with the same name already exists. # List folders Source: https://docs.landerlab.io/api-reference/folders/list-folders https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/folders/get Returns all folders in the workspace owned by the authenticated principal. # Move folder into another folder Source: https://docs.landerlab.io/api-reference/folders/move-folder-into-another-folder https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/folders/{folderId}/move-to-folder Move a folder inside another folder, or to the workspace root by passing a null parentId. Fails when moving a folder into itself or one of its subfolders, or when the destination already contains a folder with the same name. # Rename folder Source: https://docs.landerlab.io/api-reference/folders/rename-folder https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/folders/{folderId}/update Rename an existing folder. Fails if a sibling folder already uses the new name. # Create integration Source: https://docs.landerlab.io/api-reference/integrations/create-integration https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/organizations/{organizationId}/integrations/create Create a new organization integration. The body shape depends on the integration type (e.g. RedTrack, ClickFlare, Brevo, Klaviyo, MetaPixel, GoogleTagManager). OAuth-based types (MailChimp, HubSpot, Gmail, Sheets, AWeber) require an OAuth `code` from the interactive flow and are not practical to call directly via API. # Delete integration Source: https://docs.landerlab.io/api-reference/integrations/delete-integration https://backend-v2.landerlab.workers.dev/api/v2/openapi.json delete /api/v2/organizations/{organizationId}/integrations/{integrationId}/delete Delete an organization integration. It is also detached from every lander that used it (their previews and published integrations are refreshed). # Get Cloudflare OAuth authorize URL Source: https://docs.landerlab.io/api-reference/integrations/get-cloudflare-oauth-authorize-url https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/integrations/cloudflare/oauth/authorize-url Returns the Cloudflare consent-screen URL for connecting a Cloudflare account as an integration. The OAuth state is server-minted; the callback creates or updates the integration and redirects back to the dashboard. # Get integration type catalog entry Source: https://docs.landerlab.io/api-reference/integrations/get-integration-type-catalog-entry https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/integrations/catalog/{provider} Full catalog entry for one integration type (by provider id or typeName): per-action config schemas and selectable data resources with their param dependencies. # List integration type catalog Source: https://docs.landerlab.io/api-reference/integrations/list-integration-type-catalog https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/integrations/catalog Static catalog of available integration types (credential-free metadata). Pass `full=true` for complete entries with per-action config schemas and data resources. # List integrations Source: https://docs.landerlab.io/api-reference/integrations/list-integrations https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/integrations/get Returns all integrations in the organization (credentials excluded). # List lander-integration connect configs Source: https://docs.landerlab.io/api-reference/integrations/list-lander-integration-connect-configs https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/integrations/connect-config Declarative per-type configs describing how a lander integration is configured (resource selects, tags, field-mapping semantics, payload assembly). Consumed by the mobile app so the connect flows stay server-defined. # Attach integration to lander Source: https://docs.landerlab.io/api-reference/lander-integrations/attach-integration-to-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/create Create a lander integration. For page integrations (pixels, tag managers) pass `{ integrationId, variantIds? }`. For lead integrations pass `{ type, name, data, integrationId? }` where `data` is the type-specific config (field mappings, audience/list selection, etc.). # Detach integration from lander Source: https://docs.landerlab.io/api-reference/lander-integrations/detach-integration-from-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json delete /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/{landerIntegrationId}/delete Remove a lander integration link. # Disable lander integration Source: https://docs.landerlab.io/api-reference/lander-integrations/disable-lander-integration https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/{landerIntegrationId}/disable Deactivate a lander integration. # Enable lander integration Source: https://docs.landerlab.io/api-reference/lander-integrations/enable-lander-integration https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/{landerIntegrationId}/enable Activate a lander integration so it processes leads/events. # Get integration data for lander setup Source: https://docs.landerlab.io/api-reference/lander-integrations/get-integration-data-for-lander-setup https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/getIntegrationData Fetch provider-side resources (audiences, lists, fields, spreadsheets, etc.) plus the lander's local lead fields, used to build a lander integration config. Pass `source` (integration type), `required` (resource key) and, for credential-based providers, `integrationId`. # List lander integration delivery logs Source: https://docs.landerlab.io/api-reference/lander-integrations/list-lander-integration-delivery-logs https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/logs/landerIntegrations/get Paginated request/response logs for lead deliveries to integrations across the organization. Filter by `landerIds` (JSON array string, empty = all owned landers), integration `type`, date range, and free-text `q` (searches request/response). Use this to verify leads are reaching an integration and to debug failures. # List lander integrations Source: https://docs.landerlab.io/api-reference/lander-integrations/list-lander-integrations https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/get Returns all integrations attached to a lander. # Update lander integration Source: https://docs.landerlab.io/api-reference/lander-integrations/update-lander-integration https://backend-v2.landerlab.workers.dev/api/v2/openapi.json put /api/v2/workspaces/{workspaceId}/landers/{landerId}/integrations/{landerIntegrationId}/update Update a lander integration. Same body shape as create: `{ integrationId, variantIds? }` for page integrations, `{ type, name, data, integrationId? }` for lead integrations. # Clone lander Source: https://docs.landerlab.io/api-reference/landers/clone-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/clone Duplicate a lander as a new, separate page in the same workspace/folder. All of each variant's files (HTML, images, CSS, JS, fonts, videos, and any other assets) are copied into the new variant; URLs inside HTML files are rewritten to point at the copy, other files are copied as-is (relative references keep working). The clone is unpublished and auto-named. Ideal for creating a new page based on an existing one, e.g. translations. # Create lander Source: https://docs.landerlab.io/api-reference/landers/create-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/create Create a new lander. If `templateId` is omitted, a default template is used. Optionally place the lander in a folder or attach it to a website. # Create lander from URL Source: https://docs.landerlab.io/api-reference/landers/create-lander-from-url https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/create/url Import an existing web page by URL and create a new editable lander from it. Rate limited to 25 imports per day per organization when called with an API key. Optionally place the lander in a folder # Delete lander Source: https://docs.landerlab.io/api-reference/landers/delete-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json delete /api/v2/workspaces/{workspaceId}/landers/{landerId}/delete Delete a lander and all of its variants, files, and integrations. If the lander is a website master, master is reassigned to another lander in the website when possible. # Get lead JSON Schema for a lander Source: https://docs.landerlab.io/api-reference/landers/get-lead-json-schema-for-a-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/{landerId}/lead-schema Returns a Draft-07 JSON Schema describing all fields a lead from this lander can contain, including form fields, quiz answers, system fields, and active integration fields. # Get lead JSON Schema for multiple landers Source: https://docs.landerlab.io/api-reference/landers/get-lead-json-schema-for-multiple-landers https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/lead-schemas Returns a Draft-07 JSON Schema for the leads collected across multiple landers. By default all fields are merged into a single object schema (later landers override earlier ones on key collision). Pass `union=true` to instead return a `oneOf` of per-lander schemas, each labeled by lander name. # List workspace landers Source: https://docs.landerlab.io/api-reference/landers/list-workspace-landers https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/get Returns all landers in the workspace with computed preview URL and status. # List workspace landers (slim) Source: https://docs.landerlab.io/api-reference/landers/list-workspace-landers-slim https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/landers/list Lightweight lander listing: id, name, live/preview URLs and publish status. # Move landers to folder Source: https://docs.landerlab.io/api-reference/landers/move-landers-to-folder https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/move-to-folder Move one or more landers into a folder. Fails if any lander belongs to a website. Returns a single `lander` when one id is passed, otherwise the full `landers` list. # Publish lander Source: https://docs.landerlab.io/api-reference/landers/publish-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/publish Publish a lander on the given domain and path. Returns 400 if plan limits are exceeded or the path is taken. # Remove lander from folder Source: https://docs.landerlab.io/api-reference/landers/remove-lander-from-folder https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/remove-from-folder Detach a lander from its folder (sets folderId to null). Returns 404 if the lander is not currently in a folder. # Rename lander Source: https://docs.landerlab.io/api-reference/landers/rename-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json put /api/v2/workspaces/{workspaceId}/landers/{landerId}/update Rename an existing lander. # Unpublish lander Source: https://docs.landerlab.io/api-reference/landers/unpublish-lander https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/workspaces/{workspaceId}/landers/{landerId}/unpublish Unpublish a lander, removing it from its current domain. # List organization leads Source: https://docs.landerlab.io/api-reference/leads/list-organization-leads https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/leads/get Returns paginated leads across the entire organization with lander and workspace context, each with the integrations it was sent to and its phone / email verification and OTP status. # List workspace leads Source: https://docs.landerlab.io/api-reference/leads/list-workspace-leads https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/workspaces/{workspaceId}/leads/get Returns paginated leads for the workspace, each with the integrations it was sent to and its phone / email verification and OTP status. Supports filtering and search. # Mcp Source: https://docs.landerlab.io/api-reference/mcp ## MCP Server Connect AI assistants to LanderLab via the [Model Context Protocol](https://modelcontextprotocol.io). Manage landing pages, analytics, leads, and A/B tests from Claude, Cursor, Windsurf, Manus, ChatGPT, or any MCP-compatible client. ```text theme={null} https://api.landerlab.dev/mcp ``` OAuth sign-in · 30+ tools · Works everywhere ## Overview The LanderLab MCP server gives AI assistants the ability to list landers, pull analytics, publish and unpublish pages, manage leads, run A/B tests, and more on your behalf. Instead of switching between your AI tool and the LanderLab dashboard, your assistant handles it in one conversation. **Who is this for?** Performance marketers, media buyers, and teams who want to manage their LanderLab account faster. Ask your AI assistant what you need in plain English and it calls the right API for you. **How it works.** The MCP server exposes tools that your AI assistant can call during a conversation. When you say "list my landers in workspace 1," the assistant calls `landers_list` and returns the results. *** ## Connect In Claude, search for LanderLab under **Settings > Connectors > Browse connectors** and click **Connect**. In every other client, add `https://api.landerlab.dev/mcp` as a remote MCP server. Either way, you complete a LanderLab sign-in prompt in your browser. There is no API key and no header. Step-by-step guides for each client: * [Claude.ai](/mcp/ai-assistants/claude) * [Claude Desktop](/mcp/ai-assistants/claude-desktop) * [Claude Code](/mcp/ai-assistants/claude-code) * [Cursor](/mcp/ai-assistants/cursor) * [Windsurf](/mcp/ai-assistants/windsurf) * [Manus](/mcp/ai-assistants/manus) * [ChatGPT](/mcp/ai-assistants/chatgpt) * [Gemini CLI](/mcp/ai-assistants/gemini-cli) For any other client that supports the MCP HTTP transport, the minimal config is: ```json theme={null} { "mcpServers": { "landerlab": { "type": "http", "url": "https://api.landerlab.dev/mcp" } } } ``` The previous endpoint, `https://api.landerlab.dev/api/v2/mcp` with an `X-API-Key` header, is being retired. Remove it from your config and reconnect using the URL above. *** ## Tools Reference Your organization is auto-resolved from your signed-in account. No need to pass an organization ID. ### Read-Only | Tool | Description | | --------------------- | ---------------------------------------- | | `workspaces_list` | List all workspaces | | `landers_list` | List landing pages in a workspace | | `domains_list` | List domains in a workspace | | `domains_list_global` | List all domains across the organization | | `integrations_list` | List configured integrations | | `leads_list` | List leads for a lander | | `leads_list_org` | List leads across the organization | | `variants_list` | List A/B test variants | | `api_key_list` | List API keys | | `dashboard_get` | Get visits, conversions, and leads stats | | `analytics_graphs` | Get graph data for a lander | | `analytics_stats` | Get detailed stats for a lander | | `analytics_reports` | Generate reports for a lander | | `reporting_get` | Run multi-lander reporting | | `editor_load` | Load HTML and settings for a variant | ### Mutations | Tool | Description | | ---------------------------- | ----------------------------------- | | `lander_publish` | Publish a landing page | | `lander_unpublish` | Unpublish a landing page | | `editor_save` | Save HTML content for a variant | | `editor_save_settings` | Save variant settings | | `variants_set_weights` | Set A/B test traffic split | | `variants_enable` | Enable a variant | | `variants_disable` | Disable a variant | | `leads_update` | Update a lead | | `leads_delete` | Delete a lead | | `leads_update_org` | Update a lead (org-level) | | `leads_delete_org` | Delete a lead (org-level) | | `lander_integration_enable` | Enable an integration on a lander | | `lander_integration_disable` | Disable an integration on a lander | | `lander_integration_delete` | Remove an integration from a lander | | `integration_create` | Create an org-level integration | | `api_key_revoke` | Revoke an API key | | `api_key_update` | Update an API key | Full schemas and parameters: [API documentation](https://api.landerlab.dev/api/v2/docs) *** ## Authentication The MCP server uses OAuth. On first connection, your client sends you to a LanderLab sign-in page. You approve the access request once, and the client stores and refreshes the token on its own. Access is tied to the account you sign in with, and your organization is resolved automatically. To revoke access, open **Settings > Connected Apps** in LanderLab, or remove the connector in your AI tool. API keys are still used for direct REST API calls. See [Generate an API Key](/mcp/generate-api-key). *** ## Example Prompts Once connected, just talk to your AI assistant in plain English: > **"List all my landers and their status"** Calls `landers_list` and returns page names, URLs, and publish status. > **"Show me analytics for lander X over the last 7 days"** Calls `analytics_stats` with the date range and returns visits, conversions, and leads. > **"Unpublish lander X"** Calls `lander_unpublish` to take the page offline. > **"Set A/B test weights to 70/30 for lander X"** Calls `variants_set_weights` to adjust traffic distribution between variants. > **"Show me all leads from workspace 1"** Calls `leads_list` and returns lead data for that workspace. *** ## Troubleshooting **Sign-in window does not open** - Your client or browser is blocking the pop-up. Allow pop-ups for your AI tool and reconnect. **Connected but no tools appear** - Restart your AI tool. Most clients only load the tool list at the start of a session. **401 Unauthorized** - Your session expired or access was revoked. Remove the connector and add it again to sign in fresh. **Not Acceptable** - The `Accept` header must include both `application/json` and `text/event-stream`. This usually shows up when testing with curl or a custom client. **Still using the old endpoint** - Configs pointing at `https://api.landerlab.dev/api/v2/mcp` with an `X-API-Key` header should be replaced with `https://api.landerlab.dev/mcp`. # Create workspace Source: https://docs.landerlab.io/api-reference/workspaces/create-workspace https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/organizations/{organizationId}/workspaces/create Create a new workspace within the organization. Fails if the workspace name is already taken or the plan limit is reached. # List workspaces Source: https://docs.landerlab.io/api-reference/workspaces/list-workspaces https://backend-v2.landerlab.workers.dev/api/v2/openapi.json get /api/v2/organizations/{organizationId}/workspaces/get Returns all workspaces the API key has access to within the organization. # Rename workspace Source: https://docs.landerlab.io/api-reference/workspaces/rename-workspace https://backend-v2.landerlab.workers.dev/api/v2/openapi.json post /api/v2/organizations/{organizationId}/workspaces/{workspaceId}/update Rename an existing workspace. Fails if another workspace in the organization already uses that name. # LanderLab Changelog Source: https://docs.landerlab.io/changelog LanderLab changelog and product updates. Stay up to date with new features, improvements, and bug fixes shipped in LanderLab. ### Formulas in Quiz Funnels Formulas You can now calculate values from quiz answers and show the result anywhere in your funnel. Combine answers with math to build things like a live savings estimate, a running total, or a personalized score, then drop the result straight into a step title, paragraph, or button. **How to use it** * Open your quiz and click the **Formulas** icon in the left sidebar * Click **Add Formula**, give it a clear name, and build the calculation in the **Expression** field * Insert any number field as a variable with the `{ }` button, then set your decimals and a fallback * Check the result live in the **Test** section * Add the formula to any text field with the `{{=Formula Name}}` syntax, or pick it from the variable menu [Learn more](/features/quizzes/formulas) ### MCP Now Uses OAuth Connecting an AI assistant no longer requires an API key. Add `https://api.landerlab.dev/mcp` as a connector, sign in to LanderLab in your browser, and you are done. No headers, no keys stored in config files. **What changed** * New MCP server URL: `https://api.landerlab.dev/mcp` * Authentication happens through a browser sign-in instead of the `X-API-Key` header * Your organization is resolved from the account you sign in with * In Claude, LanderLab is now a listed connector: search for it under **Settings > Connectors > Browse connectors** instead of adding a custom connector **If you already have MCP set up** Existing setups using `https://api.landerlab.dev/api/v2/mcp` with an `X-API-Key` header should be removed and re-added with the new URL. API keys continue to work for direct REST API calls. [Learn more](/mcp/overview) ### Two-Factor Authentication and Active Sessions Your LanderLab account now has two new security controls: two-factor authentication and a list of every device signed in to your account. **Two-Factor Authentication** Add a second step to your login. After entering your password, LanderLab asks for a one-time code from your authenticator app, so a stolen password is not enough to get in. * Works with any authenticator app, such as Google Authenticator, Authy, or 1Password * Scan the QR code once and confirm with a code to turn it on * Save your recovery codes somewhere safe in case you lose your phone **Sessions** See every device currently signed in to your account, with the browser, operating system, location, and last active time for each one. * Click **Sign out** on any device you do not recognize * Click **Sign out everywhere** to end every session at once, including your current one * Expand a session to see more detail about the device **How to use it** * Go to **Settings** and open **Security** * Under **Two-Factor Authentication**, click **Enable** and follow the setup steps * Under **Sessions**, review your signed in devices and sign out of anything unfamiliar ### Global Blocks The Global Blocks screen in LanderLab, listing reusable blocks such as navbars and footers You can now build a block once and reuse it across every landing page. Edit it in one place and every page using it updates automatically, so navbars, footers, and offer sections stay consistent without repeating the same work on each page. Unlike saved components, which create an independent copy each time you use them, a global block stays connected everywhere it is placed. **How to use it** * In the left sidebar, under **Assets**, click **Global Blocks** * Click **Add Global Block** * Describe what you want with AI, pick a preset like Navbar, Footer, Testimonials, FAQ section, or CTA banner, or click **Create From Scratch** * Refine the block in the editor, then click **Save & Publish** Add the block to any landing page from your global blocks list. To update it later, open it, make your change, and publish again. [Learn more](/features/global-blocks/get-started) ### Version History You can now go back to an earlier version of your landing page and restore it in one click. As you build and edit, LanderLab keeps a record of previous versions, so nothing you worked on is ever truly lost. Changed your mind about an edit? Prefer how a section looked before? Removed something by mistake? Open Version History, find the version you want, and bring it back. **How to use it** * Open your landing page in the editor * Click the **Version History icon** in the left sidebar, near the bottom * Select any previous version and click **Restore** [Learn more](/features/editor/version-history) ### Workflows (BETA) LanderLab now lets you automate what happens after a visitor becomes a lead. Build a visual flow that triggers on every new lead, branches with conditions, and sends data wherever you need it, from Google Sheets to any CRM or API. Go to **Workflows**, click **Add Workflow**, and connect your trigger, conditions, and actions on the canvas. Track every lead's path, including failed steps, in the Runs view. [Learn more](/features/workflow/getting-started) ### System Activity Logs LanderLab now has a full audit log under Settings. Every change made across your organization is recorded, including who made it, when, and from which device and IP address. Go to **Settings** and click **Logs** to view the audit trail. [Learn more](/features/multi-user/system-logs) ### In-App Notifications LanderLab now has a notification center. You will get updates directly inside the app whenever something happens across your account. Click the **Bell icon** in the top navigation bar to open your notifications. ### Live Mode Live Mode lets you preview all JavaScript on your landing page exactly as visitors will see it. The editor normally blocks JS to keep editing clean, but features like popups, mouse effects, and scroll animations need it to run. Live Mode is how you check all of that without leaving the editor. When active, the editor panel is disabled. You can still use AI mode to keep iterating. **How to enter Live Mode** Click the **Play icon** in the bottom toolbar. The editor also switches to Live Mode automatically every time the AI mode applies a refinement, so you can immediately see the full result including any JS effects. **How to return to Edit Mode** * Click the **Pencil icon** in the bottom toolbar * Hover over the **Live Mode** button in the top-right corner and click **Go to Edit Mode** [Learn more](/features/editor/toolbar/live-mode) ### Domain-Level Custom Code The Custom Code tab in LanderLab domain settings, showing the head and body script injection fields You can now inject global scripts, tracking pixels, and custom styles across every landing page on a domain from a single place, without editing each page individually. A new **Custom Code** tab is available inside domain settings with two injection points: * **Inside head before ``** - for tracking pixels, tag managers, and analytics scripts that need to load early * **Inside body before ``** - for scripts that should load after the page content To access it, go to **Settings** > **Domains**, click the **three-dot menu (...)** on any domain, select **Settings**, and open the **Custom Code** tab. [Learn more](/features/domain/settings/global-scripts) ### MCP (Model Context Protocol) Support LanderLab now supports MCP, letting you connect AI assistants like Claude directly to your workspace. Once connected, you can build, edit, and manage landing pages through natural language without leaving your AI tool. What you can do with MCP: * Create and update landing pages by describing what you want * Query your workspace data, pages, and settings * Automate repetitive tasks through AI-assisted workflows To get started, visit the [MCP documentation](/mcp/overview) for setup instructions and available actions. ## New UI: Landing Page Preview, Grid View, and Better Settings The LanderLab interface has been updated with several improvements that make it faster and easier to manage your pages and settings. **Grid View** gives you a visual overview of all your landing pages at once. Instead of scanning a flat list, you can now browse pages as cards and spot what you need at a glance. **Better Settings Organization** reorganizes the settings panel so related options are grouped together. Finding and updating your configurations now takes fewer steps. These changes apply to all workspaces automatically. ## Domain Settings: Disable Indexing & Custom 404 Page Two new options are now available in Domain Settings, giving you more control over how your domains behave. **Disable Indexing** lets you block search engines from indexing all pages published under a specific domain. When enabled, a `noindex` directive is applied across every page on that domain automatically. Useful for staging environments, paid traffic campaigns, or any domain you want to keep out of organic search. **Custom 404 Page** lets you replace the default LanderLab 404 page with a URL of your own. When a visitor hits a broken or missing link under your domain, they get redirected to your fully designed page instead. To access both settings, go to **Settings** > **Domains**, click the three-dot menu next to any domain, and select **Settings**. [Disable Indexing](/features/domain/settings/disable-indexing) · [Custom 404 Page](/features/domain/settings/404) ## File Upload Block You can now add a **File Upload block** to any quiz funnel step. Users get a drag-and-drop upload area where they can submit images, documents, or videos before moving forward. Set accepted file types, min/max file limits, and make the upload required if needed. Total upload size is capped at **30 MB** per file. [Learn more](/features/quizzes/blocks/file-upload) ## Signature Block You can now add a [Signature block](https://docs.landerlab.io/features/quizzes/blocks/signature) to any step in your quiz funnel. When a user clicks the field and enters their signature, it is automatically saved as an image and stored as a URL link in the LanderLab CRM under the lead's record. **Signature field** * Clickable input field with a customizable placeholder text * Defaults to "Click here to sign" * Captures and saves the signature as an image on submission **CRM storage** * The signature is stored automatically as an image URL in the lead's record **Validation** * Enable the Required toggle to prevent submission without a signature * Set a custom error message shown when the user tries to skip it ## Quiz Canvas Upgrade The quiz canvas now works smarter and faster. Every element in your quiz step is now directly interactive, giving you full control without leaving the canvas. **Navigate elements with arrows** * Click any element to select it * Use the **up and down arrows** to reorder it within the step * Left and right arrows appear when movement in that direction is available **Add elements inline** * Click the **plus icon** that appears between elements to insert a new block exactly where you need it * No need to drag from a sidebar or scroll through menus **Quick actions on every element** Click the **three-dot menu** on any selected element to access: * **Copy** - duplicate the element to use elsewhere * **Paste** - insert a copied element in the current position * **Cut** - remove and move the element to a new location * **Duplicate** - create an instant copy right below * **Remove** - delete the element from the step **Click to select from the preview** * Click directly on any element in the canvas preview to select it * The **settings panel on the left** will automatically switch to show the options for that element * No more hunting through layers or menus to find what you want to edit ## New Experience of Pop-up Builder Animation of the LanderLab pop-up builder, showing a pop-up being created and styled in the editor Introducing a brand new **Pop-up Builder** - a fully redesigned experience for adding and managing pop-ups directly inside the LanderLab editor. **Start in seconds** * Access pop-ups from the **Popups icon in the left sidebar** * Choose from ready-made **templates** or start with a blank canvas * Use the **AI builder** to generate content instantly **Full design control** * Drag and drop any element into your popup — text, images, CTAs, forms, countdown timers, quiz funnels, or custom code * Customize size, layout, background, typography, and animations **Smart trigger options** * **On Page Load** - show immediately when the visitor lands * **After Delay** - set an exact wait time in seconds * **On Scroll (%)** - trigger after the visitor scrolls a set percentage of the page * **Exit Intent** - catch visitors before they leave **Display & behavior controls** * **Stay Dismissed** - visitors who close it won't see it again for 30 days * **Show Once** - trigger the popup one time per session only * **Position** - place your popup in 7 positions (center, corners, or sides) * **Animation** - choose from Scale, Fade, Slide Up, Slide Down, or Bounce **Backdrop & close button** * Show or hide the backdrop, set its color, opacity, and blur effect * Enable **close on backdrop click** or **close on ESC key** * Fully customize the close button shape, position, size, and colors [Creating Popups](https://docs.landerlab.io/features/editor/popup/create) · [Editing Popups](https://docs.landerlab.io/features/editor/popup/editing-popups) ## AI Credit Distribution Enhanced credit management for team admins: * **Simplified credit limits:** Set monthly spending caps per user or leave blank for unlimited * **Better visibility:** View real-time credit usage across your entire team * **Quick adjustments:** Change credit limits anytime—new limits apply on the next billing cycle * **Clearer interface:** Streamlined settings in **Settings → Users** with one-click access to credit controls [Learn more](https://docs.landerlab.io/features/multi-user/credit-limits) ## Conditional Visibility You can now show or hide any block based on user answers. * **Display elements only when conditions are met** * **Personalize the flow** based on user input * **Control exactly what each visitor sees** Available in block settings → [Conditional Visibility](https://docs.landerlab.io/features/quizzes/conditions/visibility) ## Advanced Conditional Logic The advanced conditional logic builder, combining answers from multiple quiz steps into one routing rule You can now route visitors based on multiple [conditions across different steps](https://docs.landerlab.io/features/quizzes/conditions/advanced-navigation-rules). * **Combine answers from multiple questions** * Build **complex qualification logic** in one flow * Send users to different steps, pages, or outcomes **No need to create multiple funnels** - handle everything in a single flow. ## Flow Map View Flow Map view in the quiz builder, showing every quiz step laid out as a connected visual map Introducing **Flow Map View** in the quiz builder — see your entire quiz structure at a glance. * **Visual overview of all steps** * **Click any step to edit instantly** * **Easier navigation** for complex flows Build and manage quizzes faster with a clear, visual map. Available in the Quiz Editor ## AI Lead Insights The AI Lead Insights panel, summarizing lead data with completion rates, trends, and recommendations Introducing [**AI Lead Insights**](https://docs.landerlab.io/features/leads/ai-lead-insights) - automatically analyze your lead data and get clear, actionable recommendations. * **Data overview** (completion rates, countries, patterns) * **Actionable insights** to improve performance * **Trends** (timing, spikes, behavior) * **Anomaly detection** * **Audience segmentation** * **Data quality checks** No more manual spreadsheets - the AI tells you what's happening and what to fix. Find it in: **Landing Page → Leads → AI Insights** ## AI Quiz Builder Upgrade We've shipped a major upgrade to the [**AI Quiz Builder** ](https://docs.landerlab.io/features/quizzes/create/with-ai)- faster, smarter, and more powerful. * **10x faster** with conversational editing (make changes via chat) * **AI-generated images** and icons built-in * **Smarter logic and improved question flow** * **Upload a PDF** to generate a landing page or quiz Build and edit quizzes in seconds with a more intuitive AI experience. ## Image Compression We've added a built-in [**Image Compressor**](https://docs.landerlab.io/features/editor/quick-actions/compress-images#compress-images-for-better-performance) that also converts images to WebP for faster loading pages. * **Reduce image size** in one click * **Automatically convert to WebP** * **Improve page speed** and performance **No need for external tools** - optimize your images directly inside LanderLab. # Community Source: https://docs.landerlab.io/community This section includes the most common questions asked by real LanderLab users. Here, you’ll find practical answers based on real use cases - covering everything from basic setup to advanced topics like tracking, editor features, quizzes, A/B testing, and campaign optimization. It’s designed to help you quickly solve issues, learn best practices, and understand how others are using LanderLab in real campaigns. *** ## Landing Page Questions [How to Create a Landing Page from a Variant in LanderLab?](/community/landing-page/create-a-landing-page-from-an-existing-variant) [How to Copy Image URL in LanderLab Editor?](/community/landing-page/copy-image-url) [**How to Change Your Timezone in LanderLab?**](/community/landing-page/change-your-timezone) *** ## Quiz (Flow) Questions [How to Pass Quiz Answers via URL Parameters?](/community/quiz/pass-quiz-answers-url-parameters) [How to Fire Meta Pixel Lead Event on Quiz Submit?](/community/quiz/fire-meta-pixel) *** ## A/B Testing Questions [How to Pass Variant ID to ClickFlare from LanderLab?](/community/ab-testing/passing-variant-id-to-click-flare-for-a-b-testing) *** ## Tracking [**How to Track Lead Generation Campaigns** **with ClickFlare and LanderLab?**](/community/tracking/track-lead-generation-campaigns-with-clickflare-and-landerlab) [How to Fix Google Account Connection Issues?](/community/integrations/fix-google-sheets-connection-issues) *** ## Workflows [How to Send Workflow Leads to Klaviyo?](/workflow/send-workflow-leads-to-klaviyo) # How to Pass Variant ID to ClickFlare from LanderLab Source: https://docs.landerlab.io/community/ab-testing/passing-variant-id-to-click-flare-for-a-b-testing Learn how to pass the variantId parameter from LanderLab to ClickFlare to track A/B test performance and analyze conversions by variant. When running A/B tests in LanderLab, you can pass the active **variant ID** to ClickFlare to track performance per variant. This allows you to see which variant is generating better results directly inside your tracking platform. *** ## Important Requirement This works **only if A/B testing is enabled and you have more than one variant active**. If your landing page has only one variant, the `variantId` parameter will not be relevant. *** ## How It Works LanderLab automatically appends the `variantId` as a URL parameter. You just need to make sure your tracking setup (ClickFlare, Voluum, RedTrack, etc.) is configured to capture it. *** ## Step-by-Step Setup ### 1. Open Your Traffic Source in ClickFlare * Go to your **Traffic Source settings** * Locate the **Parameters** section ### 2. Add a New Parameter Create a new parameter with: * **Name:** `variantId` * **TS Parameter:** `variantId` * **TS Token:** `variantId` (or your platform equivalent) This ensures ClickFlare captures the variant dynamically ### 3. Save Your Settings * Click **Save** * Your traffic source is now ready to receive variant data Group 85 ## What Happens Next When traffic hits your LanderLab page: * The active variant (A, B, etc.) is automatically added to the URL * ClickFlare captures it as `variantId` * You can analyze performance by variant inside your tracker *** ## Why This Is Useful * Track conversions by variant * Optimize campaigns based on real performance data * Connect downstream events (calls, leads, sales) to specific variants *** ## Important Notes * No manual setup is needed inside LanderLab - the parameter is passed automatically * You only need to configure your tracking platform to read it * Works with any tracker that supports URL parameters # Fix Google Account Connection Issues Source: https://docs.landerlab.io/community/integrations/fix-google-sheets-connection-issues Learn how to fix Google authentication errors in LanderLab by removing the linked app from your Google account and reconnecting. Some users may see a warning that a Google integration is not safe, or run into errors during authentication. This usually happens when a previous connection between LanderLab and your Google account was not completed properly or became stale. The fix is to remove LanderLab from your Google account's linked apps and then reconnect it from scratch. Go to [myaccount.google.com](https://myaccount.google.com/) and sign in with the same Google account you use for the integration. In the left sidebar, click **Linked apps**. Linked Apps Search for **LanderLab** (or **landerlab.io**) in the list. Click on it, then click **Delete all connections** to remove all permissions. Confirm the removal when prompted. Find LanderLab Delete Connections Go back to LanderLab, open the integrations panel, and add your Google integration again. You will go through the authentication and permissions flow as if connecting for the first time. This creates a fresh, clean connection. After reconnecting, the warning should no longer appear and the integration will work as expected. This applies to any Google integration in LanderLab, including Google Sheets and Google Address Autocomplete. # How to Change Your Timezone in LanderLab Source: https://docs.landerlab.io/community/landing-page/change-your-timezone Learn how to update your timezone in LanderLab profile settings to make sure your analytics data reflects the correct local time. LanderLab uses your timezone setting to display analytics data. If your reports show timestamps that don't match your local time, updating your timezone will fix that. ## How to update your timezone 1. Go to **Settings** in the top-right corner of the dashboard. 2. Under **Account**, click **Profile**. 3. Scroll down to the **Timezone** field. 4. Select your timezone from the dropdown. 5. Save your changes. Your analytics data will now reflect the correct local time. Group 2147226211 # How to Copy Image URL in LanderLab Editor Source: https://docs.landerlab.io/community/landing-page/copy-image-url Learn how to quickly copy an image URL in LanderLab using the editor. Open images in a new tab and grab the direct link for use in tracking, ads, or custom code. ## Description In LanderLab, you can easily get the direct URL of any image used in your landing page. This is useful when you need to reuse images in custom code, tracking scripts, or external tools. *** ## How to Copy an Image URL 1. Go to your landing page editor 2. Find the image you want to use 3. Right-click on the image to open the context menu 4. Click **“Open image in new tab”** 5. In the new tab, copy the URL from the browser address bar That URL is the direct image link # How to Create a Landing Page from a Variant in LanderLab Source: https://docs.landerlab.io/community/landing-page/create-a-landing-page-from-an-existing-variant Learn how to duplicate a variant into a separate landing page. Turn A/B test variants into standalone pages for new campaigns or URLs. This method allows you to take a variant from an A/B test and turn it into a completely separate landing page. This is useful when you want to: * Launch a winning variant as its own page * Use it on a different path or campaign * Separate it from A/B testing ### How It Works You will duplicate a variant into a new landing page using A/B testing, then convert it into a standalone page. *** ## Step-by-Step Guide ### 1. Create a New Landing Page * Create a [**new landing page from scratch**](https://docs.landerlab.io/features/landing-pages/create/from-scratch) ### 2. Enable A/B Testing * Open the new landing page * Activate [**A/B Testing**](https://docs.landerlab.io/features/analytics/ab-testing) ### 3. Add a New Variant * Click **Add Variant** * Select **Another Landing Page** ### 4. Select Source Page & Variant * Choose the landing page that contains the variant you want * Then select the specific **variant** to replicate The selected variant will now be duplicated into your new page Group 81 ### 5. Set as Main Variant * Open the duplicated variant * Set it as the [**Main Variant**](https://docs.landerlab.io/features/analytics/ab-testing) Set As Main ### 6. Clean Up * Delete the default (blank) variant * Disable **A/B Testing** Delete ### Final Result You now have a **fully separate landing page** based on the original variant. *** ## Important Notes * The duplicated variant keeps: * Design * Content * Structure * It becomes fully independent from the original page  # Fire Meta Pixel Lead Event on Quiz Submit Source: https://docs.landerlab.io/community/quiz/fire-meta-pixel Learn how to fire a Meta Pixel Lead event when a visitor submits your LanderLab quiz, including the JS snippet, verification steps, and common fixes. When a visitor completes and submits your LanderLab quiz, you can fire a Meta Pixel **Lead** event at that exact moment. This is one of the most useful conversion signals you can send to Meta because it captures high-intent users who went through your entire quiz flow, not just people who landed on the page. This guide covers the full setup, how to verify it is working, and what to do if it is not. Your landing page must already have the **Meta Pixel base code installed** before following this guide. If you have not done that yet, see [Set Up Meta Pixel Integration](/integrations/pixels/meta-pixel) first. ## How It Works LanderLab fires a custom browser event called `ll-quiz-submit` every time a visitor submits the quiz. The code you will add in this guide listens for that event and tells Meta Pixel to track it as a `Lead`. The snippet also includes a guard (`typeof fbq === "function"`) to prevent errors if the Pixel base code has not loaded yet. ## Setup Go to **Landing Pages** and click the name of the landing page that contains your quiz. Click **Edit** to open the quiz builder. Inside the quiz builder, find and click **JS Code**. If there is any existing code in this field, delete it before pasting the new snippet. Having multiple listeners for the same event is the most common cause of the Lead firing twice. Copy and paste the following code into the **JS Code** field: ```js theme={null} // Meta Pixel: fire Lead on quiz submit window.addEventListener("ll-quiz-submit", function () { if (typeof fbq === "function") { fbq("track", "Lead"); } }); ``` Do not wrap this code in `` tags. The JS Code field only accepts plain JavaScript. JS Code Click **Update** in the top right corner to save your changes. Click **Preview** and complete the quiz yourself to test before going live. Once you have confirmed it is working, publish your page or funnel as usual. ## Verify the Lead Event Is Firing Choose one of the following methods to confirm Meta Pixel is receiving the Lead event. 1. Install the [Meta Pixel Helper](https://chromewebstore.google.com/detail/meta-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc) Chrome extension. 2. Open your quiz page in the browser. 3. Complete the quiz and submit it. 4. Click the Pixel Helper extension icon and confirm a **Lead** event appears in the list. This is the fastest way to verify. The event shows up immediately after submission. 1. Go to [Meta Events Manager](https://business.facebook.com/events_manager) and select your Pixel. 2. Click **Test Events**. 3. Open your quiz page using the test link provided by Meta. 4. Submit the quiz. 5. Watch the Test Events panel for a **Lead** event. It may take a few seconds to appear. ## Troubleshooting Check the following: * **Meta Pixel base code is not installed.** The `fbq` function must exist on the page before the snippet can call it. Complete the [Meta Pixel setup](/integrations/pixels/meta-pixel) if you have not already. * **Script tags were included.** The JS Code field does not accept HTML. Remove any `` tags from the snippet. * **Code is in the wrong place.** Make sure the snippet is in the quiz builder's **JS Code** tab, not in a page header or global script area. This happens when the same listener is registered more than once. Check that the Lead snippet only exists in one place. Common sources of duplication: * The snippet is in both the quiz **JS Code** tab and the page header. * The same snippet was pasted twice inside the JS Code field. * A global script area on the page also contains the same listener. Remove all duplicates and keep only the one instance inside the quiz JS Code tab. # How to Pass Quiz Answers via URL Parameters Source: https://docs.landerlab.io/community/quiz/pass-quiz-answers-url-parameters Learn how to pass quiz answers as URL parameters in LanderLab using submit and continue buttons. Send user data to custom result pages, tracking tools, or external funnels. ## How It Works When a user interacts with your page (for example, fills a form or completes a step), their data can be added to the URL as parameters. Example: ```text theme={null} ?name=John&email=john@email.com ``` This data can then be used on the next page or in external tools. Group 78 ## How to Enable It To pass data through the URL: 1. Go to your page or flow **Settings** 2. Enable **Forward URL Parameters** 3. Enable **Include Quiz Data** *** ## Important Notes * Parameters are based on the **field Name**, not the label * Field names must be **unique and properly formatted** * Works when redirecting to another page or URL *** ## Button Requirement Passing data through URL parameters is triggered only when using: * **Submit button** * **Continue button** * **CTA button** *** ## Common Use Cases * Passing data to another page in your funnel * Sending information to external tools or systems * Keeping tracking data consistent across steps\\ # ClickFlare + LanderLab Integration Guide Source: https://docs.landerlab.io/community/tracking/track-lead-generation-campaigns-with-clickflare-and-landerlab Connect ClickFlare and LanderLab to automatically send lead data back via S2S postback. Track conversions, map form fields, and improve ad optimization with full-funnel attribution LL CF ## Overview This guide walks you through connecting ClickFlare and LanderLab so that every lead captured on your landing page is automatically sent back to ClickFlare via server-to-server (S2S) postback. Once connected, you can see lead data (name, email, phone) directly in ClickFlare reporting and pass it downstream to ad platforms like Meta for improved signal quality and better ad optimization. ## How It Works When a visitor clicks your ad, ClickFlare assigns a unique click ID and redirects them to your LanderLab landing page. That click ID travels with the visitor in the URL. When the visitor submits a form on your landing page, LanderLab fires an S2S postback to ClickFlare containing the click ID, the conversion type, and any form data you choose to map (name, email, phone, etc.). This gives you full-funnel attribution: you know exactly which campaign, ad, and keyword generated each lead. LanderLab fires the postback on form submission only. You cannot trigger it on other events like page load or button click. ## Prerequisites * An active ClickFlare account * An active LanderLab account * A published landing page in LanderLab with a lead capture form *** ## Part 1: Set Up the Offer in ClickFlare The LanderLab landing page acts as your "offer" in ClickFlare. Create it as an offer so you can assign it to a campaign and append the click ID. 1. In ClickFlare, go to **Offers** and click **New Offer**. 2. Enter a name for the offer (e.g., "Bath Remodeling Lead Gen"). 3. In the **Offer URL** field, enter your LanderLab landing page URL and append the click ID parameter: ```text theme={null} https://your-lander-url.com/?click_id={cf_click_id} ``` You can also toggle on **Append Click ID to Offer URL** and ClickFlare will add it automatically. 4. Under **Conversion tracking**, select your tracking domain and set the tracking method to **S2S Postback URL**. 5. Click **Save**. Clickflare New Offer The `click_id` parameter name is important. You will use this same parameter name when configuring the integration on the LanderLab side. *** ## Part 2: Create the Campaign in ClickFlare 1. Go to **Campaigns** and click **New Campaign**. 2. On the **General** tab, fill in your campaign details (name, traffic source, etc.). 3. On the **Destination** tab: * Under Path Destination, select **Offers only** (since LanderLab serves as both the lander and the offer in this setup). * Select the offer you created in Part 1. 4. Click **Save**. 5. Go to the **Tracking** tab and copy your **Campaign URL**. This is the URL you will use in your ads. Newcampagins *** ## Part 3: Configure the ClickFlare Integration in LanderLab This is where you connect the two platforms so LanderLab knows where to send lead data when a form is submitted. ### Step 1: Open Integration Settings 1. In LanderLab, navigate to **Landing Pages** and click on the lander you are using for this campaign. 2. Click the **Integrations** tab. 3. Click **Add Integration**. 4. Find ClickFlare in the list and click **+ Add**. Integration Landerlab ### Step 2: Enter Postback Details 1. **Name:** Enter a name for this integration (e.g., "ClickFlare"). 2. **Postback URL:** Enter the base postback URL from your ClickFlare tracking domain, up to but not including the "?". For example: ```text theme={null} https://flarevisits.com/cf/cv ``` Replace `flarevisits.com` with your actual ClickFlare tracking domain. 3. **Click ID URL parameter:** Enter `click_id`. This must match the parameter name you used when appending the click ID to the offer URL in Part 1. 4. Click **Continue**. Image ### Step 3: Map Form Fields to Postback Parameters On this screen, you map form fields from your landing page to ClickFlare postback parameters. ClickFlare supports 20 custom parameters (param1 through param20) where you can send any data collected from the form. For example: | Form Field | Postback Parameter | | ---------- | ------------------ | | full\_name | param1 | | email | param2 | | phone | param3 | Check the box next to **ClickFlare Click Id** so that the click ID captured from the URL is included in the postback. This field maps to the `click_id` parameter automatically. Mapp Field #### Why map form fields? Sending lead data (email, phone, name) back to ClickFlare serves two purposes. First, you can see this data in ClickFlare reporting for each conversion. Second, ClickFlare can forward this data to ad platforms like Meta via Conversions API (CAPI), which improves match rates and helps the ad platform optimize your campaigns more effectively. ### Step 4: Add Custom Conversion Type (Optional) Under **Additional parameters**, you can add a static key-value pair that gets appended to every postback. A common use case is defining the conversion type: | Key | Value | | --- | ----- | | ct | lead | This way, the conversion will appear as "Lead" in ClickFlare, making it easy to distinguish from other conversion types. ### Step 5: Review and Connect Click **Continue** to review your integration settings. You will see a summary of the postback URL, field mappings, and additional parameters. If everything looks correct, click **Connect ClickFlare**. Review Map Fields *** ## Part 4: Use the Campaign URL in Your Ads Take the Campaign URL from ClickFlare (from Part 2, step 5) and use it as the destination URL in your ad platform. When a user clicks the ad, ClickFlare will redirect them to the LanderLab page with the click ID appended. *** ## Testing the Integration 1. Click your campaign URL to visit the landing page. 2. Submit the form with test data. 3. In ClickFlare, check the campaign report for a new conversion. Verify the conversion type and any mapped parameters (name, email, phone) appear correctly. *** ## Google Ads / Direct Tracking Setup The setup described above uses a redirect campaign, which is the standard approach for traffic sources that allow redirect URLs (Meta, native, push, etc.). If you are running traffic from **Google Ads** and using a direct tracking setup (no redirect), the click ID cannot be appended to the URL via redirect. Instead: 1. Install the **ClickFlare tracking script** on your LanderLab landing page. 2. LanderLab will automatically capture the ClickFlare click ID from the cookie set by the tracking script. 3. The rest of the integration (field mapping, postback, conversion type) works the same way. *** ## Quick Reference | Step | Where | What | | ------------------- | ----------- | ----------------------------------------------------------- | | Create Offer | ClickFlare | Add LanderLab URL with `?click_id={cf_click_id}` | | Create Campaign | ClickFlare | Assign the offer, copy the campaign URL | | Add Integration | LanderLab | Connect ClickFlare with postback URL and click ID parameter | | Map Fields | LanderLab | Send form data (name, email, phone) via param1-20 | | Set Conversion Type | LanderLab | Add `ct=lead` as an additional parameter | | Launch | Ad Platform | Use the ClickFlare campaign URL in your ads | *** ## FAQ No. The LanderLab-ClickFlare integration fires the postback on form submission only. Other page events (page view, button click, scroll) are not supported as postback triggers. ClickFlare supports 20 custom parameters (param1 through param20). You can map any form field to any of these parameters. Install the ClickFlare tracking script on the page. LanderLab will pick up the click ID from the cookie automatically, so you do not need the redirect-based click ID passthrough. Yes. The parameter name you use in the ClickFlare offer URL (e.g., `click_id`) must match the Click ID URL parameter you enter in the LanderLab integration settings. # Use A/B Testing to Optimize Conversions Source: https://docs.landerlab.io/features/analytics/ab-testing Use A/B testing to compare landing page variants, optimize conversions, and identify top-performing designs and campaigns. A/B Testing allows you to **compare multiple versions (variants)** of a landing page by splitting traffic between them. This helps you identify which version performs best based on your conversion goals. You can test elements like: * Headlines * Layouts * Images * Call-to-action buttons Entire page designs ## How A/B Testing Works When A/B Testing is enabled: * Visitors are **distributed across different variants** * Each variant collects its own **performance data** * You can compare results to determine the **best-performing version** For accurate results, make sure **conversion tracking is enabled**. *** ## How to Activate A/B Testing Switchabtest **Before you begin:**\ Make sure your landing page is **published**. A/B testing requires a live page to properly distribute traffic and collect data. ### Steps 1. Go to **Landing Pages**. 2. Click the landing page you want to test. 3. Make sure you are on the **Overview** tab. 4. Locate the **Variants section**. 5. Find the **mode selector (Standard Mode)**. 6. Click it and select **A/B Test**. 7. Confirm by clicking **Switch to A/B Test Mode**. A/B Testing is now active for your landing page. **Tip:** After activating A/B Testing, remember to **publish or republish your page** so traffic is properly distributed between variants. *** ## Create Variants for Testing To run an A/B test, you need at least **two variants**. Varian B ### Method 1: Duplicate an Existing Variant 1. Go to the **Variants section**. 2. Click **+ Add Variant**. 3. Select **Duplicate an existing variant**. 4. Choose the source variant (e.g., Variant A). 5. Enter a name (e.g., Variant B). 6. Click **Add Variant**. *** Variant2 ### Method 2: Duplicate Another Landing Page 1. Click **+ Add Variant**. 2. Select **Duplicate another landing page**. 3. Choose a page from your workspace. 4. Click **Apply**. 5. Name the variant. 6. Click **Add Variant**. *** ## Manage Traffic Distribution You can control how traffic is split between variants. Manageweight ### Steps 1. In the **Variants section**, click **Manage Weights**. 2. Assign a weight (traffic share) to each variant. ### Examples * **50 / 50 split:**\ Variant A = 100\ Variant B = 100 * **3 variants (equal split):**\ A = 100, B = 100, C = 100 * **Custom split:**\ A = 300, B = 100, C = 100 → (60% / 20% / 20%) 3. Click **Update Weights** to apply. You can also use **Spread Equally** to automatically distribute traffic *** ## Set a Winning Variant (Main Variant) Once you identify a winning variant, you can make it the main version. Mainvariant ### Steps 1. Go to the **Landing Page Overview**. 2. Locate your variants list. 3. Find the variant you want to set as main. 4. Click the **three dots (•••)**. 5. Select **Set as Main**. *** ## Return to Standard Mode After finishing your test: 1. Switch back from **A/B Test Mode → Standard Mode** 2. The **Main Variant** will receive **100% of the traffic** *** ## Best Practices * Test **one major change at a time** for clearer insights * Run tests long enough to collect meaningful data * Use analytics to compare **conversion rates, clicks, and leads** # Set Up Conversion Tracking for Landing Pages Source: https://docs.landerlab.io/features/analytics/conversions-tracking Set up conversion tracking to measure clicks, form submissions, and user actions to optimize landing page performance. Conversion tracking allows you to measure the effectiveness of your **landing pages and marketing campaigns** by monitoring specific actions performed by visitors. These actions can include: * Visiting a specific page * Submitting a form * Clicking a link * Clicking a button Tracking conversions helps you understand **how well your landing pages perform and how visitors interact with your funnel**. *** ## Track Page Visits as Conversions ### Steps 1. Go to **Landing Pages**. 2. Click the **name of the landing page** you want to configure. 3. Open **Settings**. 4. Go to the **Conversions** tab. 5. Enable **Track Visits as Conversions**. 6. Click **Save Settings**. Trackviisits *** ## Track Form Submissions as Conversions Form submissions are one of the most common conversion events, allowing you to measure how many visitors submit their contact information. **Before you begin:**\ This option only applies to pages that contain a **form element**. ### Steps 1. Go to **Landing Pages**. 2. Click the **landing page name**. 3. Open **Settings**. 4. Navigate to the **Conversions** tab. 5. Enable **Track Form Submits as Conversions**. 6. Click **Save Settings**. Formsubmission *** ## Track Link Clicks as Conversions If your landing page sends users to another part of your funnel or an external offer, you can track **link clicks as pre-conversions**. This helps measure how effective your landing page is at **driving user intent toward the next step**. ### Steps 1. Go to **Landing Pages**. 2. Select the landing page you want to configure. 3. Open **Settings**. 4. Go to the **Conversions** tab. 5. Enable **Track Link Clicks as Conversions**. 6. Click **Save Settings**. Linkclicks *** ## Track Button Clicks as Conversions ### 1. Open the Landing Page Editor 1. Go to **Landing Pages**. 2. Click the landing page you want to edit. 3. Click **Open in Editor**. ### 2. Select the Button Inside the editor: 1. Click the **button element** you want to track. 2. The **button settings panel** will appear on the right side. ### 3. Enable Conversion Tracking In the **Link settings section**: 1. Locate the option **Track Clicks as Conversions**. 2. Check the box to enable it. ### 4. Save and Publish 1. Click **Save**. 2. **Publish or Republish** your landing page. After publishing, every click on that button will be recorded as a **conversion** in your landing page analytics. Buttonclick ## Why Conversion Tracking Matters Using conversion tracking allows you to: * Measure **campaign performance** * Identify **high-performing landing pages** * Optimize **funnels and CTAs** * Improve **conversion rates** # Landing Page Analytics and Performance Metrics Source: https://docs.landerlab.io/features/analytics/landing-page Analyze landing page performance with metrics like views, clicks, leads, and conversions to optimize campaigns and improve results. The **Landing Page Analytics** section provides detailed insights into how your landing pages are performing. These analytics help you understand visitor behavior, measure conversions, and identify opportunities to optimize your campaigns. By analyzing this data, you can make informed decisions to improve **engagement, lead generation, and overall campaign performance**. Anaal ## How to Access Landing Page Analytics Follow the steps below to view the analytics for a specific landing page. ### 1. Go to Landing Pages Navigate to your **workspace dashboard** where your landing pages are listed. ### 2. Select the landing page Locate the landing page you want to analyze and click its **name**. ### 3. Open the Overview tab Once the landing page overview opens, make sure you are on the **Overview** tab.\ This is where the analytics data is displayed. ### 4. Select a date range Click the **date range selector** in the top-right corner of the page. Choose the time period you want to analyze. ### 5. Analyze the data After selecting the date range, the analytics dashboard will update and display performance data for the landing page and all of its variants. *** ## Key Analytics Metrics The analytics dashboard includes several important metrics that help you evaluate your landing page performance. | Metric | Description | | :-------------- | :----------------------------------------------------- | | **Page Views** | Total number of times the landing page has been loaded | | **Clicks** | Total number of clicks recorded on the page | | **Leads** | Number of leads collected from the page | | **Conversions** | Total number of successful conversion events | *** ## Variant Performance If your landing page has multiple variants (for example during **A/B testing**), the analytics page shows the performance of each variant individually. You can view: * **Traffic percentage assigned to each variant** * **Visits** * **Clicks** * **Leads** * **Conversions** This makes it easier to determine which variant performs best. *** ## Traffic Breakdown The analytics dashboard also provides additional insights into your traffic sources and audience demographics. ### Device Breakdown Shows the distribution of visitors by device type: * Desktop * Mobile * Tablet ### Geographic Breakdown Displays where your visitors are coming from, including: * **Countries** * **Cities** # Reporting Dashboard for Campaign Performance Source: https://docs.landerlab.io/features/analytics/reporting Use reporting to compare landing page performance, track conversions, and identify top-performing campaigns across workspaces. The **Reporting** section provides a centralized overview of the performance of all your landing pages across your workspaces. This unified view allows you to quickly compare campaigns and identify which pages are performing best. By analyzing the reporting dashboard, you can easily monitor key metrics and optimize your marketing efforts. *** ## How to Access Reporting Group48 Follow these steps to access the reporting dashboard. ### 1. Open the Reporting section From your **LanderLab dashboard**, locate the **Reporting** option in the main sidebar navigation and click it. ### 2. View landing page performance The **Reporting page** will display a table listing all your published landing pages. Each row contains performance data for a specific landing page. ### 3. Compare campaign results You can compare the performance of multiple landing pages side by side. Use the available **sorting or filtering options** in the table header to analyze your campaigns more easily. For example, you can sort by **Conversion Rate** to quickly find your best-performing pages. *** ## Key Metrics Available The reporting table displays essential performance metrics for each landing page. | Metric | Description | | :----------------------- | :-------------------------------------------------------------- | | **Visits / Clicks** | Total number of visitors or clicks received by the landing page | | **Leads / Conversions** | Total number of leads or conversions generated | | **Conversion Rate (CR)** | Percentage of visitors who completed a conversion action | *** ## Why Use Reporting The reporting dashboard helps you: * Quickly identify **top-performing landing pages** * Compare **multiple campaigns** * Track **conversion performance across workspaces** * Identify pages that may require **optimization** # Add a Domain in LanderLab Source: https://docs.landerlab.io/features/domain/add-domain Add a custom domain in LanderLab. LanderLab checks your domain automatically, recommends Cloudflare or Manual DNS, and shows the exact records to add so you can publish on your own domain. Connecting your own domain lets you publish and serve landing pages on your own URL. This strengthens your branding and improves compatibility with major ad networks and search engines. LanderLab now adds domains through a single, guided flow. You enter your domain, LanderLab checks it, and then recommends the best way to connect it. You confirm the method, add what LanderLab shows you, and publish. ## How adding a domain works When you enter a domain, LanderLab checks where it is currently managed and picks one of two connection methods: * **Cloudflare** manages DNS automatically. If your domain is already in a Cloudflare account you have connected, LanderLab can set everything up for you. * **Manual DNS** works with any registrar. You add one DNS record at your provider, and LanderLab verifies it. You do not need to choose upfront. LanderLab recommends the right method based on the check and lets you switch if you prefer. ## Before you start Make sure the following are true: * You are an **admin**. Only admins can add domains. * You **own the domain** and can access its settings. * For **Manual DNS**, you can reach your domain provider's DNS settings (GoDaddy, Namecheap, and similar). ## Add your domain In your LanderLab dashboard, open **Settings**, then select **Domains**. You will see your domain list and the option to add a new domain. Use the **Workspace** selector to choose which workspace can use the domain, then click **Add Domain** in the top-right corner. If you do not see the **Add Domain** button, you likely do not have admin permissions. Type the domain or subdomain you want to use, for example `lp.yourdomain.com`. LanderLab checks the domain as soon as you enter it. LanderLab looks at where your domain is managed and recommends a connection method. See [What LanderLab checks](#what-landerlab-checks) below for the two outcomes. Keep the recommended method or switch between **Cloudflare** and **Manual DNS**. When you choose Cloudflare, pick the account from the **Cloudflare Account** dropdown. Click **Add Domain**. LanderLab shows the exact records or nameservers to add, based on the method you picked. Add them at your provider. Your domain appears in the list with a **Pending** status. Once your changes propagate, the status changes to **Active** and the domain is ready for publishing. ## What LanderLab checks After you enter a domain, LanderLab shows one of two results. ### The domain is already in your Cloudflare account If the domain lives in a Cloudflare account you have connected, LanderLab confirms it and shows which account it belongs to. Select that account under **Cloudflare Account**, then click **Add Domain**. LanderLab configures DNS automatically, so there is nothing to add at your registrar. If you have not connected that Cloudflare account yet, you can authorize it with a single sign-in. See [Connect a Domain with Cloudflare](/features/domain/connect-domain-cloudflare). ### The domain is managed somewhere else If the domain is not in Cloudflare, LanderLab activates **Manual DNS** and shows the provider it detected. You then have two choices: * **Add one DNS record** at your current provider and keep managing DNS there. See [Connect a Domain with Manual DNS](/features/domain/manual-connection). * **Send the domain to Cloudflare** so DNS is managed automatically from then on. See [Connect a Domain with Cloudflare](/features/domain/connect-domain-cloudflare). ## Choose your connection method Authorize Cloudflare once, pick your account, and let LanderLab manage DNS automatically. Recommended for the fastest setup. Keep DNS at your current provider. Add the single record LanderLab shows you, then verify it. ## Frequently asked questions Use **Cloudflare** for the fastest, hands-off setup, especially if your domain is already in a Cloudflare account. Use **Manual DNS** if your domain is managed elsewhere and you prefer to keep it there. Cloudflare supports both root domains and subdomains. Manual DNS usually requires a subdomain such as `lp.yourdomain.com`, because some providers do not allow the required record on a root domain. If you need the root domain with Manual DNS, connect through Cloudflare instead. DNS changes usually take a few minutes, but can take up to 24 to 48 hours depending on your provider. The status updates to **Active** automatically once the changes propagate. # Connect a Domain with Cloudflare Source: https://docs.landerlab.io/features/domain/connect-domain-cloudflare Connect a domain to LanderLab through Cloudflare. Authorize Cloudflare once with a single sign-in, choose your account, and let LanderLab manage DNS automatically. Connecting through **Cloudflare** is the fastest and recommended way to add a domain. LanderLab manages the required DNS records for you, so there is no manual configuration to maintain. You can use Cloudflare in two situations: * Your domain is **already in a Cloudflare account** you connect to LanderLab. * Your domain is **managed somewhere else** and you choose to send it to Cloudflare. ## Before you start Make sure the following are true: * You are an **admin** in LanderLab. * You have a **Cloudflare account**, or you are ready to create a free one. * You own the domain and can update its settings at your registrar. ## Connect your Cloudflare account LanderLab connects to Cloudflare with a single sign-in. You no longer need a Global API Key. Open **Settings**, then **Domains**, and click **Add Domain**. Enter your domain, then choose **Cloudflare** as the connection method. If you have already connected a Cloudflare account, pick it from the **Cloudflare Account** dropdown. If you have not connected one yet, choose to connect and authorize LanderLab in Cloudflare. Once you approve access, the account appears in the dropdown and stays available for future domains. ## Domain already in your Cloudflare account When LanderLab detects that your domain lives in a connected Cloudflare account, setup is nearly instant. LanderLab confirms the domain is in your Cloudflare account and shows which account it belongs to. Select that account under **Cloudflare Account**. Click **Add Domain**. LanderLab configures the required DNS records automatically through Cloudflare. Because the domain already points to Cloudflare, no registrar changes are needed. The domain moves to **Active** and is ready for publishing. ## Send a domain to Cloudflare If your domain is managed somewhere else, you can move its DNS to Cloudflare so LanderLab can manage it automatically. After entering your domain, choose **Cloudflare** and select the account you want to use. Click **Add Domain**. LanderLab creates the zone in Cloudflare and shows a **Domain Nameservers** window with the two nameservers your domain needs to point to. Update the nameservers at the registrar where you bought the domain (for example Namecheap or GoDaddy): 1. Copy the two nameservers shown in LanderLab using the **Copy** button next to each one. 2. Log in to your registrar and open the **DNS or Nameserver settings** for your domain. 3. Replace the existing nameservers with the two you copied. 4. Save your changes. The nameservers shown are unique to your Cloudflare account. Always use the exact values displayed in LanderLab. The domain shows a **Pending** status until the nameserver change propagates, then switches to **Active**. This usually takes a few minutes, but can take up to 48 hours depending on your registrar. ### Find your nameservers again If you closed the nameserver window, you can reopen it at any time: 1. Go to **Settings**, then **Domains**. 2. Find the domain in your list. It will show a **Pending** status. 3. Click the **Pending** label to reopen the **Domain Nameservers** window. ## Choosing between multiple accounts If you connect more than one Cloudflare account, all of them appear in the **Cloudflare Account** dropdown. Pick the account that holds the domain, or the one you want to manage it going forward. Cloudflare is the recommended method because it removes manual DNS work and supports both root domains and subdomains. # Connect a Domain with Manual DNS Source: https://docs.landerlab.io/features/domain/manual-connection Connect a domain to LanderLab with Manual DNS. Add the DNS record LanderLab shows you at your provider, verify it, and publish landing pages on your own domain. Use **Manual DNS** when your domain is managed outside Cloudflare, or when you prefer to keep DNS at your current provider. With this method, you add the record LanderLab shows you at your domain provider, then verify it inside LanderLab. When your domain is not in Cloudflare, LanderLab detects your provider and selects Manual DNS for you automatically. ## Before you start Make sure the following are true: * You can access your **domain DNS settings** (GoDaddy, Namecheap, and similar). * You are an **admin** in LanderLab. * You are using a **subdomain**, such as `lp.yourdomain.com`. Manual DNS usually requires a subdomain rather than the root domain. ## Connect your domain Open **Settings**, then **Domains**, and click **Add Domain** in the top-right corner. Enter the subdomain you want to use, for example `lp.yourdomain.com`. When the domain is not in Cloudflare, LanderLab activates **Manual DNS** and shows the provider it detected. Keep Manual DNS selected. Set who can publish to this domain: * **All Workspaces** lets any workspace publish to the domain, including workspaces you create later. * **Specific Workspace** limits publishing to one workspace. Click **Add Domain**. LanderLab opens the verification window and shows the exact DNS record you need to add. ## Add the DNS record at your provider 1. Log in to your **domain provider dashboard**. 2. Open **DNS Management** or the **Zone Editor**. 3. Create the record exactly as shown in LanderLab. Match the **Type**, the **Host or Name**, and the **Value or Target**. Tips: * Do not include `https://` in the value. * If a record already exists with the same host, edit or remove it to avoid conflicts. ## Verify and finish Return to the verification window in LanderLab and click **Refresh**. If the record is correct and DNS has started to propagate, verification continues. If LanderLab asks for another record, such as an SSL record to enable HTTPS, add it the same way, then click **Refresh** again. Go to **Settings**, then **Domains**, and click the **Refresh** icon. When the status shows **Active**, your domain is ready for publishing. ## Root domain notes Some providers do not allow the required record on a root domain. Because of this, Manual DNS usually works best with a subdomain such as: ```text theme={null} lp.yourdomain.com www.yourdomain.com ``` If you need to use the root domain (`yourdomain.com`), connect through [Cloudflare](/features/domain/connect-domain-cloudflare) instead, or point a subdomain like `www` to your landing pages and redirect the root domain to it. ## Common issues DNS propagation can take a few minutes, and up to 24 to 48 hours depending on your provider. Click **Refresh** to check again. Some providers expect just the subdomain (`lp`), while others expect the full host (`lp.yourdomain.com`). Follow your provider's format, but make sure the intent matches what LanderLab shows. Use a subdomain, or connect through [Cloudflare](/features/domain/cloudflare/connect-domain), which supports root domains. # Personalize 404 Not Found Page Source: https://docs.landerlab.io/features/domain/settings/404 Learn how to configure the 404 Not Found page for your domain in LanderLab, using either the default page or a custom URL. When a visitor lands on a URL that does not exist under your domain, LanderLab shows a 404 Not Found page. You can choose between the default LanderLab 404 page or redirect visitors to a custom URL with a fully designed page of your own. Group 2147226205 ## Available Options ### Default 404 The default option shows the standard LanderLab 404 page. This is enabled by default and requires no additional setup. ### Custom URL If you have a custom 404 page already designed and hosted, you can point your domain to that URL instead. When a visitor hits a broken or missing URL, they will be redirected to your custom 404 page. This is a good option if you want to match your brand, offer navigation options, or recover potential leads who land on a dead page. ## How to Configure Your 404 Page 1. Go to **Settings** in your LanderLab account. 2. Click on **Domains**. 3. Find the domain you want to configure and click the three-dot menu (**...**) on the right. 4. Select **Settings**. 5. In the **Domain Settings** panel, scroll to the **404 Not Found Page** section. 6. Select either **Default 404** or **Custom URL**. 7. If you selected **Custom URL**, enter the full URL of your 404 page. 8. Click **Save**. Your custom 404 page must be a publicly accessible URL. LanderLab will redirect visitors to that URL when they hit a page that does not exist under your domain. ## Tips for a Good Custom 404 Page * Keep the design consistent with your brand. * Add a clear call to action, such as a link back to your main landing page. * If you are running lead generation campaigns, consider including an opt-in form on the 404 page to recover lost visitors. # Disable Indexing in LanderLab Source: https://docs.landerlab.io/features/domain/settings/disable-indexing Learn how to prevent search engines from indexing all pages published under a specific domain in LanderLab. When you disable indexing for a domain, search engines like Google will not crawl or index any pages published under that domain. This is useful for staging environments, internal pages, or any domain you want to keep out of search results. Group 2147226205 ## What Does Disabling Indexing Do? Disabling indexing adds a `noindex` directive to all pages under the selected domain. This tells search engines not to include those pages in their index. The setting applies to every page published under that domain, not just individual pages. If you only want to hide a single page from search engines, manage that at the page level instead of the domain level. ## How to Disable Indexing 1. Go to **Settings** in your LanderLab account. 2. Click on **Domains**. 3. Find the domain you want to configure and click the three-dot menu (**...**) on the right. 4. Select **Settings**. 5. In the **Domain Settings** panel, find the **Indexing** section. 6. Toggle on **Disable Indexing**. 7. Click **Save**. Once saved, all pages under that domain will no longer be indexed by search engines. ## How to Re-enable Indexing To allow search engines to index your pages again, follow the same steps above and toggle off **Disable Indexing**, then click **Save**. Changes to indexing settings may take time to reflect in search engines, depending on how frequently they crawl your domain. ## When Should You Use This? * You are testing a domain and do not want it to appear in search results yet. * You are running campaigns on pages that are meant for paid traffic only, not organic search. * You want to keep a domain private from the public web index. # How to Add Global Scripts to a Domain in LanderLab Source: https://docs.landerlab.io/features/domain/settings/global-scripts Learn how to inject global tracking pixels, analytics scripts, or custom styles across every landing page on a domain using LanderLab's domain-level custom code settings. > Use domain-level custom code to inject scripts, tracking pixels, or global styles into every landing page published under a specific domain, without editing each page individually. ## What is Domain-Level Custom Code? Domain-level custom code lets you add HTML, JavaScript, or CSS that runs on every page published under a specific domain in LanderLab. Instead of adding the same script to each landing page one by one, you add it once at the domain level and it gets automatically injected into all pages on that domain. This is useful for: * Global tracking pixels (e.g. a Google Tag Manager container) * Analytics scripts that should run on every page * Custom CSS or styles that apply across all pages on the domain * Any third-party script that needs to be present on every page ## Where to Add Domain-Level Custom Code Log in to your LanderLab account and click **Settings** in the left sidebar. In the Settings menu, select **Domains**. You will see a list of all domains connected to your account. Find the domain where you want to inject global scripts. Click the **three-dot menu (...)** on the right side of that domain row. Domain Settings From the dropdown, click **Settings**. A modal will open for that domain. Inside the domain settings modal, click the **Custom Code** tab. You will see two code editor panels: Screenshot 2026 05 11 At 2 56 54 PM | Panel | Description | | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Inside head before ``** | Code entered here is injected into the `` of every page on this domain. Use this for tracking pixels, analytics tags, and meta scripts that need to load in the head. | | **Inside body before ``** | Code entered here is injected just before the closing `` tag of every page. Use this for scripts that should load after the page content. | Paste your script or code into the appropriate panel and click **Save**. The code will be automatically injected into every page published under this domain. ## Which Panel Should I Use? As a general rule: * **Head panel** - Use for tracking pixels, tag managers (e.g. Google Tag Manager), and analytics initialization scripts. These typically need to load as early as possible. * **Body panel** - Use for scripts that depend on the page content being loaded first, or for any third-party widget that recommends placement before ``. If you are not sure, check the installation instructions of the tool you are adding. Most tracking scripts specify which placement to use. Domain-level custom code is injected into every page on that domain. If you need a script to run only on a specific landing page, use the per-page custom code setting inside the landing page editor instead. After adding or updating domain-level custom code, republish any landing pages on that domain that are already live to ensure the updated code is applied. # Use Accordion for FAQs and Structured Content Source: https://docs.landerlab.io/features/editor/elements/accordion Use accordion elements to organize FAQs and content into expandable sections for a cleaner and more user-friendly layout. The Accordion element lets you display content in expandable sections.\ It’s commonly used for FAQs or structured information where you want to keep the page clean and organized. ## How to Add an Accordion * Open the left sidebar * Drag **Collapse / Accordion** onto the canvas *** Accordion ## Editing Content All content is edited directly on the canvas: * Click on the **question** to edit the title * Click on the **answer area** to edit the content This is where you manage both the question and the answer. ## Managing Items From the right panel: * **Add Item** → Create new accordion entries * Reorder items by dragging them * Each item represents one question + answer ## How It Works * Only **one item can be open at a time** * Clicking another item will automatically close the previous one ## Collapse Style You can change how the accordion looks using **Collapse Style**: * **Simple** → Minimal design * **Bordered** → Adds borders around items * **Line Bottom** → Separator lines between items * **Solid** → Filled background style ## Trigger Icon * Choose the icon style (e.g. +, arrow) * Indicates whether the item is open or closed ## Spacing Controls * **Gap** → Space between items * **Inner Space** → Padding inside each item *** ## Styling Options Like other elements, you can also customize: * Typography * Colors * Borders and radius * Spacing * Background *** ## Important Notes * Content is edited directly on the canvas * Only one accordion item stays open at a time * Styling works the same as other elements # Use Boxes to Structure Landing Pages Source: https://docs.landerlab.io/features/editor/elements/box Use boxes to group elements, control layout, and create structured, flexible landing page designs with precise spacing and alignment. The Box element is one of the most important layout tools in LanderLab. It allows you to group, organize, and control elements more precisely inside your page. *** ## What is a Box? A Box is a container that holds other elements inside it. You can place inside a box: * Text * Images * Buttons * Lists * Other boxes 👉 Think of it as a wrapper that helps you structure your content. Important Notes * Boxes are essential for structuring layouts * You can nest boxes for more flexibility * They help solve most alignment and spacing issues ### How to Add a Box * Open the left sidebar * Go to **Layout** * Drag **Box** into a section or column *** ## Why Boxes Are Important Boxes give you more control over how elements are arranged. You use them to: * Group related elements together * Align elements properly * Create more advanced layouts * Fine-tune spacing and positioning 👉 Most detailed layouts rely on boxes to work correctly. *** ## How Boxes Work Structure example:\ Section → Columns → Box → Elements * A box sits inside columns or sections * Elements go inside the box * You can place boxes inside other boxes for more control *** ## Layout Control With a box selected, you can control: * **Direction** → Row or column layout * **Alignment** → Position elements (left, center, right) * **Distribution** → Space elements evenly * **Gap** → Space between elements This is where most layout adjustments happen. *** ## Styling Options Boxes also support: * Backgrounds (color or gradient) * Spacing (padding & margin) * Borders and radius * Shadows * Width and height # Use Columns for Responsive Layouts Source: https://docs.landerlab.io/features/editor/elements/columns Use columns to create responsive layouts, organize content side by side, and design structured landing pages across all devices. Columns allow you to divide a section into multiple vertical areas so you can place content side by side. They are essential for building structured layouts like: * Text + Image * Feature grids * Multi-column sections ### How to Add Columns * Open the left sidebar * Go to **Layout** * Drag **Columns** into a section *** ## Column Settings Once selected, you’ll see column controls on the right panel. ### Device-Based Layout You can define different column layouts for each device: * **Desktop** → Choose how many columns (1–6) * **Tablet** → Adjust layout for medium screens * **Mobile** → Usually set to 1 column for better readability 👉 This ensures your design is responsive across all devices. *** ## Adjusting Column Count and Sizes You can easily control both the number of columns and how much space each one takes. * Select the **Columns** element * Open the **Settings Panel** on the right ### Change Column Count * Choose a predefined layout (2, 3, 4, etc.) ### Adjust Column Widths You have two ways: * **Visual Drag** → Drag the divider between columns directly on the canvas * This lets you quickly change the width ratio (for example 70/30 or 50/50) *** ## Gap (Spacing Between Columns) * **Gap** controls the space between columns * Measured in pixels (px) Example: * Gap: 0 → Columns touch each other * Gap: 20 → Adds space between columns *** ## How Columns Work * Each column acts like a container * You can drop elements inside each column * Columns sit inside sections Structure example:\ Section → Columns → Elements *** ## Important Notes * Columns must be inside a section * Each column can hold multiple elements * You can change layouts per device for better responsiveness # Use Countdown Timers to Boost Conversions Source: https://docs.landerlab.io/features/editor/elements/countdown Add countdown timers to create urgency, highlight deadlines, and increase conversions on your landing pages. The Countdown element lets you create urgency on your page by showing a timer.\ It’s commonly used for offers, deadlines, or limited-time actions. You can add it from the left sidebar and fully customize its behavior and design. Countdown ## Countdown Settings ### Style * Choose the visual appearance of the countdown * Different styles change how numbers and labels are displayed ### Mode There are two modes: * **Date** → Counts down to a specific date and time * **Timer** → Starts a countdown (e.g. 10 minutes) when the page loads ### Date * Available when using **Date mode** * Select the exact date and time using the picker ### Color * Controls the color of the numbers and labels ### Size * Adjusts the size of the countdown text ### Hide Labels * **Yes** → Hides labels like days, hours, minutes * **No** → Shows them ### Full Width * **Yes** → Expands the countdown across the container * **No** → Keeps it compact ### Redirect * **Yes** → Redirects users when the countdown ends * **No** → No action after it finishes *** ## Items (Time Units) You can control which time units are shown: * Days * Hours * Minutes * Seconds Each can be enabled or disabled individually. *** ## Position & Spacing Like other elements, you can adjust: * Alignment * Spacing (margin & padding) *** ## How It Works * In **Date mode**, the countdown is fixed to a specific deadline * In **Timer mode**, it starts fresh for each visitor # Use Custom Code Element for Advanced Features Source: https://docs.landerlab.io/features/editor/elements/custom-code Add custom HTML, CSS, or JavaScript to integrate tools, tracking scripts, and advanced features into your landing pages. The Custom Code element allows you to add your own code directly inside your page. This is useful for advanced use cases where you want more control or need to integrate external tools. *** ## How It Works * Drag and drop the **Custom Code** element onto your page * Click **Edit Custom Code** on the right panel * Add your code (HTML, CSS, or JavaScript) *** ## Important Behavior * The code **does NOT display inside the editor** * It only becomes visible in: * Preview mode * Live (published) page This is normal - always use Preview to check your code. *** ## What You Can Use It For The Custom Code element is commonly used by affiliates, media buyers, and marketing teams for: * Tracking scripts (custom pixels, events, third-party trackers) * Embedding external widgets (chat tools, calendars, forms) * Adding custom HTML sections * Running JavaScript logic (timers, dynamic content, redirects) * Integrating tools not natively supported *** ## Best Practices * Always test your code in **Preview** before publishing * Avoid adding heavy scripts that may slow down your page * Keep your code clean and minimal # Add and Style Text and Headings Source: https://docs.landerlab.io/features/editor/elements/headings-text Add and style headings and text to create clear, engaging content and improve readability across your landing pages. Headings and text are the core elements used to display content on your page.\ You can easily add, edit, and style them directly inside the editor. *** ## How to Add Text You can add text in two ways: ### Drag & Drop * Open the left sidebar * Go to **Elements → Content** * Drag **Headline** or **Text** onto the canvas *** ## Editing Text Click on the text element to edit it directly. ### Quick Text Styling (Inline Bar) When you select text, you’ll see quick options like: * Bold * Italic * Underline * Alignment * Style options *** ## Quick Actions (On Click) When selecting a text element, you’ll see a small toolbar with actions: * Move * Duplicate * Select parent * Generate with AI * Regenerate * Delete *** ## Double Click Options Double-clicking the text opens quick editing controls where you can: * Edit content directly * Apply basic formatting * Adjust alignment and style *** ## Styling from the Right Panel With the text selected, you can customize: * Font * Weight * Color * Size * Alignment * Spacing *** ## Important Note * Headline → Used for titles * Text → Used for paragraphs and descriptions Both behave the same but are meant for different content types. # Add and Customize Images Source: https://docs.landerlab.io/features/editor/elements/image Add and customize images to enhance landing pages, control layout, and create visually engaging designs that improve user experience. The Image element lets you add visuals to your page, such as product images, illustrations, or backgrounds. You can drag and drop it from the left sidebar and fully control how the image looks and behaves. *** ## Adding & Changing Images * Click **Change Image** in the right panel * This opens the image gallery modal Inside the gallery, you can: * Select from your uploaded images * Upload new images * Browse images from Unsplash *** ## Image Sizing Options You can control how the image fits inside its container: * **Fill** → Fills the entire area (may crop parts) * **Fit** → Shows the full image without cropping * **Stretch** → Stretches to match the container size * **Original** → Keeps the original image size *** ## Adjusting Image Position When the image is selected, you can reposition how it appears inside its container. * Use the **position control (center circle)** to shift the visible area * Example:\ If your image is cropped, you can move the focus up to show a face instead of the background *** ## Image Dimensions * Control width and height manually * Use % or px depending on your layout *** ## Managing Your Images You can manage your full image library from the gallery: * Access all uploaded images * Organize and reuse assets * Upload new files anytime *** ## Cropping Images Inside the gallery, you can crop images before using them: * Select an image * Open the crop tool * Choose aspect ratios (1:1, 16:9, etc.) * Apply crop *** ## Best Practices * Use optimized images for faster loading * Keep consistent image sizes across sections * Use Fit or Fill depending on your layout needs # Use Lists to Organize Content Source: https://docs.landerlab.io/features/editor/elements/list Use lists to organize content, highlight key points, and present features or benefits in a clear and structured way. The List element helps you display multiple points in a clean, structured way.\ It’s perfect for features, benefits, or key highlights. ## How to Add a List * Open the left sidebar * Go to **Elements → Content** * Drag **List** onto the canvas *** ## Adding Items * Click on the list * Use **+ Add List Item** to create new entries * Edit each item directly by clicking on the text Addlist ## Marker Types You can control how each list item is displayed using **Marker Type**: ### Standard Classic list styles: * Bullet * Empty circle * Numbers (1, 2, 3) * Letters (A, B, C or a, b, c) ### Emoji * Use emojis as markers * Choose any emoji (e.g. ✅ ⭐ 🔥) ### Icon * Use icons as markers * Great for more polished or branded designs ## Marker Style & Spacing * **Marker Style** → Changes the visual style (for Standard lists) * **Marker Gap** → Controls space between the marker and the text *** ## Styling the List From the right panel, you can also adjust: * Font * Size * Color * Alignment * Spacing *** ## Important Note * You can still edit each item’s text individually # Use Newsletter Forms for Lead Capture Source: https://docs.landerlab.io/features/editor/elements/newsletter Add newsletter forms to collect emails, capture leads, and track conversions directly on your landing pages. The Newsletter element lets you collect emails directly on your landing page.\ It’s commonly used for subscriptions, lead capture, or simple opt-ins. You can add it from the left sidebar and customize both its design and behavior. ## Editing the Content * Click on the input field to edit placeholder text (e.g. “Enter your email”) * Click on the button to edit the label (e.g. “Subscribe”) *** ## Newsletter Submit Settings These settings control what happens after someone submits the form. ### Redirect * **Yes** → Redirect users after submission * **No** → Stay on the same page ### URL * Set the destination where users will be redirected after submitting * Example: thank you page, offer page, or next step ### New Tab * **Yes** → Opens the redirect URL in a new tab * **No** → Opens in the same tab ### Event * Used for tracking conversions (e.g. Facebook Pixel or custom scripts) * Example:\ `fbq('track', 'Lead');` 👉 This helps track when a user submits the form. *** ## Layout Options You can also control how the newsletter form is displayed: * **Direction** → Horizontal or vertical layout * **Align Items** → Align input and button * **Gap** → Space between elements *** ## Styling Options Like other elements, you can customize: * Typography (text styles) * Colors (input, button, background) * Spacing and size * Borders and radius # Use Sections to Structure Landing Pages Source: https://docs.landerlab.io/features/editor/elements/section Learn how to use sections to structure landing pages, organize content, and control layout, spacing, and responsiveness. Sections are one of the most important building blocks in LanderLab.\ They act as the main structure of your page and allow you to organize your content into clear, separate parts. ### What is a Section? A section is a container that holds everything inside it: * Text * Images * Buttons * Forms * Any other elements 👉 You cannot add elements directly to the page without placing them inside a section. *** ## How to Add a Section * Open the left sidebar * Go to **Layout** * Drag **Section** onto the canvas *** ## Why Sections Matter Sections help you: * Separate different parts of your page (hero, features, footer, etc.) * Keep your layout clean and organized * Control spacing and structure easily Think of each section as a “block” of your page. *** ## Max Width (Key Feature) One of the main things that makes sections special is the **Max Width** setting. * Located in the right panel under **Container** * Controls how wide the content inside the section can be ### How it works: * The section itself can stretch full width * The content inside stays centered within the max width Example: * Max Width: 1240px → Content stays nicely centered and readable * Larger screens won’t stretch your content too far *** ## Spacing Inside Sections Sections also allow you to control: * Padding (space inside the section) * Margin (space outside the section) This helps you create proper spacing between different parts of your page. *** Important Notes * Every element must live inside a section * Sections define the overall layout of your page * Adjusting max width affects everything inside that section # Use Sticky Bars for Promotions and CTAs Source: https://docs.landerlab.io/features/editor/elements/sticky-bar Add sticky bars to display promotions, announcements, or CTAs that stay visible while users scroll your landing page. The Sticky Bar is a fixed element that stays visible on the screen while users scroll your page. It’s commonly used for: * Promotions * Announcements * Call-to-action messages ## How to Add a Sticky Bar * Open the left sidebar * Drag **Sticky Bar** onto the canvas *** ## Sticky Bar Settings Once selected, you’ll see all controls in the right panel. Stickybar ## Position Defines where the sticky bar appears on the screen: * **Top** → Sticks to the top of the page * **Bottom** → Sticks to the bottom of the page ## Closable Controls whether users can close the sticky bar: * **Yes** → Adds a close (X) button * **No** → Sticky bar stays visible at all times ## Animation Controls how the sticky bar appears: * **Slide** → Slides into view * **Fade** → Fades in smoothly * **None** → Appears instantly ## Trigger Defines when the sticky bar appears: * **Load** → Shows immediately when the page loads * **Scroll (px)** → Shows after scrolling a specific number of pixels * **Scroll (%)** → Shows after scrolling a percentage of the page * **Delay (s)** → Shows after a set number of seconds ## Wait * Used with **Delay trigger** * Defines how many seconds to wait before showing the sticky bar *** ## Responsive Preview Note You’ll see a note reminding you to preview on mobile. 👉 Sticky bars take screen space, so always check how they look on smaller devices. *** ## Styling Options Like other elements, you can customize: * Background (color, gradient, etc.) * Spacing (padding & margin) * Borders and radius * Typography * Visibility per device *** ## Important Notes * Sticky bars stay fixed while scrolling * They appear based on the trigger you choose * They can impact user experience if overused # Add and Embed Videos in Landing Pages Source: https://docs.landerlab.io/features/editor/elements/video Embed videos from YouTube, Vimeo, or other platforms to enhance engagement and deliver content directly on your landing pages. The Video element allows you to embed content from external hosts directly onto your canvas. Its built-in auto-detection engine identifies your video provider the moment you paste a link, saving you from manual configuration. ## Add the Video Element **Locate the Element:** Open the **Elements Sidebar** (the “+” icon) on the left side of the editor. **Drag & Drop:** Find the **Video** element under the **Content** category and drag it onto your desired section on the canvas. ## Connect Your Video 1. **Access Settings:** Click on the Video element on your canvas to open the **Properties** panel on the right. 2. **Paste the URL:** Paste your video link into the **URL** field. 3. **Auto-Identification:** Landerlab will immediately identify the source (e.g., YouTube, Vimeo, Wistia) and update the player settings accordingly Group 14 1024x873 ## Supported Video Players * **YouTube:** Ideal for general content and ease of use. * **Vimeo / Wistia:** Perfect for premium, ad-free video experiences. * **Loom:** Great for quick explainers or personalized messages. * **HTML Video:** Use this if you are hosting your own `.mp4` files. ## Key Video Controls Once your video is connected, you can use the **Playback** settings to customize the user experience: * **Autoplay:** Set the video to start as soon as the page loads (Note: Most browsers require autoplay videos to be **Muted** by default). * **Controls:** Toggle whether the visitor can see the play/pause bar and volume settings. * **Loop:** Set the video to restart automatically once it reaches the end. * **Start Time:** (For YouTube) Specify exactly which second the video should begin playing. # How to Save and Reuse Components in LanderLab Source: https://docs.landerlab.io/features/editor/how-to-save-and-reuse-components Learn how to save sections as reusable components in LanderLab to speed up your workflow, maintain consistency, and build landing pages faster. The Save as Component feature allows you to save parts of your page and reuse them across other landing pages. This helps you build faster and keep your designs consistent. *** ## How to Save a Component 1. Select the element you want to save (usually a **section or box**) 2. Right-click on it or use the toolbar that appears on hover 3. Click **Save as Component** 4. Enter a name and save The Save as Component option on a selected section in the LanderLab editor *** ## Where to Find Saved Components 1. Open the left sidebar 2. Click the **+ (Add Elements)** button 3. Go to the **Sections tab** 4. Go to **My Sections** The My Sections area of the Sections tab, showing saved reusable components 👉 All your saved components will appear there *** ## How It Works Saved components include: * Layout * Styles * Content * Links You can drag and drop them into any page.
They act as reusable building blocks for faster page creation. *** ## Important Notes Changes made to one instance **do not update others** Each saved component is independent after being added This feature is mainly for **design reuse**, not syncing content across pages *** ## When to Use It * Reusing hero sections * Reusing CTA blocks * Reusing layouts across campaigns * Speeding up page creation *** ## Warning (Imported Pages) If you save components from pages imported via URL: * The structure may not be clean * This can sometimes cause layout issues when reused 👉 Always check and clean imported sections before saving them *** ## Best Practice * Save clean, well-structured sections * Use clear names for easy reuse * Treat saved components as templates, not synced components Tip: Build your own library of reusable components to speed up campaign launches. # Use Layers Panel to Manage Page Structure Source: https://docs.landerlab.io/features/editor/layers Use the layers panel to manage page structure, organize elements, and easily navigate and edit complex layouts. The Layers panel shows the **full structure of your page** in a clear, tree-style view.\ It helps you understand how everything is organized and makes it easier to select, manage, and rearrange elements. *** ## Where to Find It 1. Open your page in the editor 2. Click the **Layers icon** on the left sidebar *** ## What You See * A hierarchical (tree) structure of your page * Sections, containers, and elements nested inside each other * Each item represents a block on your canvas Example: * Wrapper * Section * Container * Text * Image * Button *** ## What You Can Do ### Select Elements Easily Click any item in the Layers panel to instantly select it on the canvas. *** ### Understand Structure See how elements are grouped: * Which items are inside containers * How sections are built * Where elements belong *** ### Reorder Elements You can drag and reorder elements **within the same parent**. For example: * Move a button above a text inside the same container * Reorder items inside a section *** ## Important Limitation You **cannot move elements between different parents** from the Layers panel. * You can reorder inside the same container * But you cannot drag an element from one container/section into another *** ## Why It’s Useful * Quickly find hidden or hard-to-click elements * Keep your layout organized * Fix structure issues easily * Work faster on complex pages *** ## Tree Navigation The **Tree Navigation** (often displayed as a **breadcrumb trail** at the bottom of the editor) is a critical feature in the visual editor that helps you select and navigate between the different nested elements that make up your landing page layout. This is essential because modern layouts rely on placing elements *inside* other containers (like Sections, Boxes, or Columns). ### How the Tree Navigation Works The navigation appears as a horizontal list of element names at the bottom of the editor canvas, showing the current element you have selected and all of its parent containers, starting from the broadest element (like the Section) down to the most specific element (like Text or Image). ### Key Uses of Tree Navigation #### 1. Selecting Parent Containers When working with elements inside a Horizontal Box or Vertical Box, it can be difficult to select the container itself just by clicking on the canvas. The Tree Navigation makes this easy. #### 2. Identifying Nesting and Structure The trail provides an immediate visual map of your page structure. #### 3. Quick Component Jumps The navigation allows you to quickly jump between nested components without having to precisely click tiny elements on the live canvas. # Control Popups with the Popup API Source: https://docs.landerlab.io/features/editor/popup/api Open, close, and toggle LanderLab popups from buttons, links, and custom code. Full reference for the JavaScript API and the no-code opener/closer links. The Popup API lets you control any popup with code instead of relying only on the built-in triggers (page load, delay, scroll, exit intent). Call `window.llPopupsApi` from a Custom Code element or any script to open a popup from a button, close it after a form is submitted, or wire popups into your own integrations. **Use the popup's ID, not its name.** Everything in the API targets a popup by its `id`. The popup **name** (the human-readable label you see in the editor) is only metadata for analytics and display - it is never used for targeting. If you target by name, nothing will happen. *** ## Step 1 - Prepare the popup Before you can control a popup with code, set it up so it doesn't fight your triggers, and give it an ID you can reference. In the **Popup** tab of the right sidebar, set the **Trigger** to **Manual** (button-only). The popup will never auto-open - it appears only when your link or script opens it. You don't *have* to use Manual. The API works on any popup regardless of its trigger. Manual just guarantees the popup stays closed until you open it yourself. Every popup already has a unique ID. To find it, open the **Popups** panel in the left sidebar, click the **three dots (actions)** next to your popup, and choose **Copy ID**. Paste that value wherever the API asks for the popup ID. Image 35 *** ## The JavaScript API (`window.llPopupsApi`) Call the global `window.llPopupsApi` object to open, close, or toggle a popup - on a custom event, after a delay you control, or from another script. Drop the code into a **Custom Code** element on your page. ```javascript theme={null} // Open a specific popup window.llPopupsApi.open('promo-popup-id'); ``` ### Targeting: ID is optional Every method takes an **optional** popup ID: * **Pass an ID** → the action affects that one popup. * **Omit the ID** → the action affects **every popup** on the page. ```javascript theme={null} window.llPopupsApi.close('promo-popup-id'); // close one popup window.llPopupsApi.close(); // close all popups on the page ``` ### Methods | Method | What it does | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `open(id?)` | Force-opens the popup. Reopens it even if the visitor dismissed it earlier in the session (your explicit call wins). | | `close(id?)` | Closes the popup with its animation. Does **not** set the "stay dismissed" cookie - the popup can be triggered again. | | `dismiss(id?)` | Closes the popup **and** locks it: sets the 30-day cookie if **Stay Dismissed** is on, or the session flag if **Show Once** is on. This is what the built-in close button does. | | `toggle(id?)` | Opens the popup if it's closed, closes it if it's open. (Opening via toggle force-opens, same as `open`.) | | `get(id?)` | Returns the popup's HTML element when you pass an ID (or `null` if not found), or an array of all popup elements when you omit the ID. | **`close` vs `dismiss`.** `close()` is a temporary close - auto-triggers like exit-intent can still fire again. `dismiss()` is permanent for the session (and up to 30 days with **Stay Dismissed**). Use `close()` for "maybe later", `dismiss()` for "don't show this again". ### Examples ```javascript Open from a button theme={null} // Wait until the page is ready before wiring things up. // DOMContentLoaded guarantees both your button and llPopupsApi exist. document.addEventListener('DOMContentLoaded', function () { const button = document.getElementById('my-button'); button.addEventListener('click', function () { window.llPopupsApi.open('promo-popup-id'); }); }); ``` ```javascript Close after a delay theme={null} // Auto-close the popup 5 seconds after it opens window.llPopupsApi.open('promo-popup-id'); setTimeout(function () { window.llPopupsApi.close('promo-popup-id'); }, 5000); ``` ```javascript Toggle / close all theme={null} // Toggle a single popup window.llPopupsApi.toggle('promo-popup-id'); // Close every popup on the page at once window.llPopupsApi.close(); ``` ```javascript Get a popup element theme={null} // Pass an ID to get one element (or null if not found) const popup = window.llPopupsApi.get('promo-popup-id'); // Omit the ID to get an array of every popup on the page const allPopups = window.llPopupsApi.get(); ``` *** ## Good to know * **Run your code after the page is ready.** `window.llPopupsApi` only exists once the popup script has loaded. Wrap your calls in a `DOMContentLoaded` listener — like the **Open from a button** example above — so the API is available before you call it. * **Preview mode.** On preview URLs, the "Stay Dismissed" cookie and "Show Once" flag are never read or written, so the popup always appears while you're testing. * **ESC to close.** If **Close on ESC** is enabled for the popup, pressing Esc closes the topmost open popup - no code needed. * **Open wins over dismissal.** Calling `open()` reopens a popup even after a visitor dismissed it, but the popup's own auto-triggers still respect the dismissal. Use `dismiss()` if you want to re-lock it. # How to Create a Popup in LanderLab Source: https://docs.landerlab.io/features/editor/popup/create Learn how to add and manage popups in the LanderLab editor. Pick a ready-made template or build from scratch in just a few clicks. ## Creating a popup 1. **Open your page in the editor** From your dashboard, click **Edit** on the landing page you want to add a popup to. 2. **Go to the Popups panel** In the left sidebar, click the **Popups** icon. If no popups have been added yet, you'll see an empty state with an **Add Popup** button. 3. **Click "Add Popup"** This opens the **Popup Templates** panel. 4. **Select a template or start blank** Pick one of the available templates, or choose **Empty** to build from scratch. The popup is instantly added to your page. The Popup Templates panel in the LanderLab editor, showing ready-made templates and an Empty option # How to Edit and Configure a Popup in LanderLab Source: https://docs.landerlab.io/features/editor/popup/editing-popups Learn how to add content, set triggers, configure the backdrop, and control the close button for your LanderLab popups - all from the editor. Once a popup is created, the editor gives you full control. Add any content to the popup canvas and use the right sidebar to control when it appears, how it looks, and how it closes. ## Adding content to your popup Click on a popup in the Popups panel to activate it on the canvas. The left sidebar switches to the **Elements** panel - the same one you use to build your landing page. Drag and drop any element directly into the popup. Common use cases include: 1. Headlines and text 2. Images and video 3. CTA buttons 4. Forms and lead capture 5. Quiz funnels 6. Redirect links 7. Countdown timers 8. Custom code You can use the AI builder inside the popup. Click the AI icon on the canvas to generate or rewrite content directly within the popup. *** ## Right sidebar - popup settings When a popup is selected, the right sidebar shows three tabs: **Popup**, **Backdrop**, and **Close**. ### Popup tab This is where you control when and how the popup appears. **Trigger** - choose what causes the popup to show: 1. **On Page Load** - shows immediately when the visitor arrives on the page. 2. **After Delay** - shows after a set number of seconds. Enter the wait time in the field that appears. 3. **On Scroll (%)** - shows after the visitor scrolls a percentage of the page. You can set different values for desktop, tablet, and mobile. 4. **Exit Intent** - shows when the visitor is about to leave the page. **General** — controls position, animation, and display frequency: 5. **Position** - where on screen the popup appears: Center, Top Left, Top Center, Top Right, Left Center, Right Center, or Bottom Left. 6. **Animation** - how the popup enters: Scale, Fade, Slide Up, Slide Down, or Bounce. 7. **Stay Dismissed** - when enabled, visitors who close the popup won't see it again for 30 days. 8. **Show Once** - only triggers the popup one time per session. 9. **Size, Layout, Background, Typography** - standard styling options. Set the popup width, adjust spacing, background color, and font styles to match your page design. The Popup tab in the right sidebar, with trigger, position, animation, and display frequency settings *** ### Backdrop tab The backdrop is the darkened overlay that appears behind the popup. It helps focus the visitor's attention on the popup content. 1. **Visibility** - show or hide the backdrop entirely. 2. **Close on click** - when enabled, clicking anywhere on the backdrop closes the popup. 3. **Color** - set the backdrop color and opacity. Default is `rgba(0,0,0,0.5)`. 4. **Blur** - apply a blur effect to the page content behind the popup. The Backdrop tab in the right sidebar, with visibility, close on click, color, and blur settings *** ### Close tab Controls the close button displayed on the popup. 1. **Visibility** - show or hide the close button. 2. **Shape** - choose the icon style for the close button. 3. **Position** - place the button inside or outside the popup box. 4. **Size and Offset** - adjust the button size and its distance from the corner. 5. **Close on ESC** - when enabled, pressing the Escape key also closes the popup. 6. **Colors** - set the background and icon color of the close button. The Close tab in the right sidebar, with close button visibility, shape, position, size, and color settings # Compress Images for Better Performance Source: https://docs.landerlab.io/features/editor/quick-actions/compress-images Compress images to reduce file size, improve page speed, and enhance performance across your landing pages. The Compress Images feature helps you **reduce image file sizes** across your page.
This improves loading speed, performance, and overall user experience. ## When to Use It LanderLab already optimizes images by default (converting them to efficient formats like WebP). However, you should use this feature when: * You **import a page via URL** * You **upload a ZIP file** * Your images are **not optimized** (e.g., PNG, JPG with large sizes) *** ## Where to Find It 1. Open your page in the editor 2. Click the **Actions / Quick Actions panel** 3. Go to **Optimization** 4. Select **Compress Images** The Compress Images option under Optimization in the LanderLab Quick Actions panel *** ## Compression Options ### Standard * Strong compression * Significantly reduces file size * Best for performance ### High Quality * Lighter compression * Keeps more image quality * Slightly larger file size *** ## How to Use It 1. Choose your compression type (Standard or High Quality) 2. Click **Compress** 3. All images on the page will be optimized automatically *** ## Important Notes * You must **save your page first** before compressing * Compression applies to **all images on the page** * This action helps improve page speed and loading times *** ## Why It Matters * Faster pages = better conversions * Improved mobile performance * Better experience for users with slow connections # Pass URL Parameters Across Links Source: https://docs.landerlab.io/features/editor/quick-actions/pass-through-url-parameters Pass URL parameters across all links to preserve tracking data, maintain attribution, and optimize campaign performance. This feature allows you to automatically **forward URL parameters across all links on your page**. It ensures that important tracking data (like UTM tags or affiliate IDs) is **not lost when users click to the next page**. *** ## What It Does When enabled, any parameters in your page URL (for example:
`?utm_source=facebook&utm_campaign=spring`) will be **automatically added to every link** on your page. So instead of losing tracking data, it continues through the entire user journey. *** ## Where to Find It 1. Open your page in the editor 2. Click the **Actions / Quick Actions panel** 3. Locate **Pass Through URL Params** 4. Toggle it ON The Pass Through URL Params toggle in the LanderLab Quick Actions panel *** ## How It Works If your page URL contains: ```text theme={null} ?utm_source=facebook&utm_campaign=test ``` And a button links to: ```text theme={null} https://offer.com ``` It will automatically become: ```text theme={null} https://offer.com?utm_source=facebook&utm_campaign=test ``` *** ## Why It’s Important * Keeps **tracking data consistent across pages** * Essential for **affiliate marketing** * Helps maintain **accurate campaign attribution** * Prevents loss of **UTMs, click IDs, or custom parameters** *** ## When to Use It * Running paid ads (Facebook, Google, TikTok, etc.) * Using affiliate or tracking links * Passing data to external pages or funnels * Multi-step funnels where tracking must persist *** ## Important Notes * Applies to **all redirect links on the page** * Works automatically once enabled * Does not require manual setup per button *** ## Best Practice Always enable this when: * You rely on tracking parameters * You’re sending traffic to another page or offer # Replace Links Across Landing Pages Source: https://docs.landerlab.io/features/editor/quick-actions/replace-links Replace all links on your landing page instantly to redirect traffic, update offers, and ensure consistent navigation. The Replace Links feature lets you **update all outgoing links on your page in one action**.
Instead of editing every button or link manually, you can redirect all traffic to a single destination instantly. This is especially useful when working with imported pages or templates. ## Where to Find It 1. Open your page in the editor 2. Click the **Actions / Quick Actions panel** 3. Select **Replace Links** The Replace Links option in the Quick Actions panel of the LanderLab editor *** ## How It Works A popup will appear where you can choose how links should be replaced. ## Main Option (Most Used) ### Replace all outgoing links * Replaces **every link on the page** with your new URL * This includes: * Buttons * Text links * Images * Hidden links 👉 This is the most common and recommended option *** ## How to Use It 1. Enable **Replace all outgoing links** 2. Enter your destination URL (offer, funnel, tracking link, etc.) 3. Click **Replace Links** 👉 Done - all links are updated instantly *** ## Other Options (Advanced) ### Replace only specific outgoing links * Lets you target and replace only certain links * Useful if you want to keep some links unchanged (e.g., social icons) *** ### Replace only outgoing links with specific properties * Advanced filtering based on link attributes * Used in very specific cases *** ## Why This Is Important ### Fix Hidden Links Imported pages often contain links in places you don’t easily see
👉 This ensures no traffic goes to the wrong destination ### Save Time Instead of editing each element manually, you update everything in seconds ### Keep Consistency All buttons and links will point to the same destination *** ## Example * URL entered: `https://your-offer.com` 👉 Result: every clickable element now redirects to that link *** ## Best Practices * Always use this after importing a page * Double-check your URL before applying * Test your page after replacing links # Replace Text Across Landing Pages Source: https://docs.landerlab.io/features/editor/quick-actions/replace-text Replace text across your landing page instantly to update messaging, CTAs, and content without manual editing. The Replace Text feature allows you to **quickly update text across your entire page** without editing each element one by one. This is especially useful when you need to change repeated words, phrases, or labels. ## Where to Find It 1. Open your page in the editor 2. Click on the **Actions / Quick Actions panel** 3. Select **Replace Texts** The Replace Texts option in the Quick Actions panel of the LanderLab editor *** ## How It Works A popup will appear with two fields: * **Find Text** → the text you want to replace * **Replace With** → the new text you want to use Click **Replace Texts** to apply the changes across the page. *** ## When to Use It * Updating CTA text across multiple sections * Changing product or service names * Fixing repeated wording mistakes * Adjusting messaging quickly *** ## Important Notes * It replaces **all matching text occurrences** on the page * Make sure your “Find Text” is exact * It won’t partially match words (only exact matches) # Advanced Settings for Positioning and CSS Source: https://docs.landerlab.io/features/editor/styles/advanced Use advanced settings to control positioning, layering, and custom CSS for precise and flexible landing page design. The Advanced section gives you **extra control over positioning and styling** using more technical options.\ This is mainly used by users who are comfortable with CSS or need more precise control. *** ## Position Controls how the element is placed on the page. Common options: * **Static** (default) → follows normal layout flow * **Relative** → can be moved slightly from its position * **Absolute** → positioned freely inside its parent * **Fixed** → stays in the same place on screen * **Sticky** → sticks in the same place on screen (even when scrolling) 👉 Most users should keep this on **Static** unless they know what they’re doing ## Z-Index Controls **layer order (stacking)** of elements. * Higher value → element appears on top * Lower value → element goes behind 👉 Example: * Modal or popup → high z-index * Background → low z-index *** ## Custom CSS Allows you to write your own CSS to style the element. Example: ```text theme={null} #element { color: red; } ``` 👉 You can: * Override styles * Add custom effects * Fine-tune design beyond the builder options *** ## When to Use This Use Advanced settings when: * You need precise positioning * You want elements to overlap * You’re adding custom styling not available in the UI *** ## Important Notes * This section is **not required for most users** * Incorrect CSS or positioning can break layouts * Always test changes before publishing *** ## Best Practices * Stick to default settings if unsure * Use Custom CSS only when necessary * Keep code clean and minimal # Use Animations to Enhance Engagement Source: https://docs.landerlab.io/features/editor/styles/animation Add animations to highlight elements, guide user attention, and create more engaging and interactive landing page experiences. Animations let you add movement to your elements to make your page more engaging and interactive. They help draw attention, guide users, and improve the overall experience. *** ## Where to Find It 1. Select any element (button, image, text, etc.) 2. Go to the **right panel** 3. Open the **Animation** section 4. Click **+ Add** or edit an existing animation *** ## Choosing an Animation Inside the animation panel, you’ll find a large library of animations. * You can **scroll** to explore all available options * You can use the **search bar** to quickly find a specific animation Animations are also organized into **categories**, such as: * Attention Seekers * Entrances 👉 This makes it easier to find the right type of animation depending on your goal *** Image ## Animation Settings ### Trigger Defines when the animation happens: * **On Load** → plays when the element appears * **On Hover** → plays when the user hovers over it * **On Click** → plays when clicked * **On Viewport** → plays continuously (if supported) *** ### Speed * Controls how fast the animation runs *** ### Delay * Adds a pause before the animation starts *** ### Repeat * Controls how many times the animation plays *** ## Example * Animation: Fade In * Trigger: On Load * Speed: Normal * Delay: 0.3s * Repeat: 1 👉 Result: element smoothly appears when the page loads *** ## Best Practices * Keep animations subtle and purposeful * Avoid using too many animations at once * Use entrances to introduce elements smoothly * Use attention animations only where needed # Customize Backgrounds for Landing Pages Source: https://docs.landerlab.io/features/editor/styles/background Customize backgrounds with colors, images, and gradients to enhance design and create visually engaging landing pages. The Background section lets you control how elements look behind their content. You can apply colors, images, or gradients depending on the type of element. You’ll find these settings in the **right-side panel** when selecting an element. *** ## Where to Find It 1. Select an element (section, container, button, etc.) 2. Go to the **right panel** 3. Open the **Background** section Background *** ## Background Types Different elements support different background options. ### None (X) * Removes any background * The element becomes transparent Image ### Color * Apply a solid color * You can use: * Color picker * RGB values 👉 Most commonly used for buttons, sections, and containers Image ### Image * Set an image as the background * Available mainly for larger elements like sections or containers Options include: * Upload or change image * Adjust size (fit, cover, etc.) 👉 Not available on smaller elements like buttons Image ### Gradient * Create a smooth transition between colors Options include: * **Linear** or **Radial** style * Angle control * Multiple color stops 👉 Great for modern UI and visual depth Image # Customize Borders and Corner Radius Source: https://docs.landerlab.io/features/editor/styles/border-radius Adjust borders and corner radius to shape elements, create separation, and enhance the visual design of your landing pages. The Border section lets you control the outline of an element and how rounded its corners are. This helps define shapes, create separation, and improve visual style. *** ## Radius (Corner Rounding) * Controls how rounded the corners are You have two options: * **All corners together** → applies the same value everywhere * **Individual corners** → set different values for each corner 👉 Higher values = more rounded\ 👉 0 = sharp corners Screenshot 2026 03 25 At 11 23 07 AM *** ## Style Defines how the border looks: * **None** → no border * **Solid** → a continuous line * **Dashed/Dotted** (if available) → styled borders Screenshot 2026 03 25 At 11 23 34 AM ## Color * Sets the border color * Can match your brand or contrast with background *** ## Width * Controls how thick the border is You can: * Set **one value for all sides** * Or define each side separately (top, right, bottom, left) Screenshot 2026 03 25 At 11 24 05 AM # Use Box Shadow for Depth and Styling Source: https://docs.landerlab.io/features/editor/styles/box-shadow Add box shadows to create depth, highlight elements, and enhance the visual hierarchy of your landing page design Box Shadow adds depth to your elements by creating a shadow effect around them. It helps elements stand out and gives your design a more modern, layered look. ### How It Works A shadow is made up of multiple settings that control how it looks and behaves. *** Image ## Shadow Settings ### Preset * Quickly apply a ready-made shadow style (e.g., Small, Medium, Large) * Best for fast and consistent design *** ### Type * **Outer Shadow** → appears outside the element (most common) * **Inner Shadow** → appears inside the element *** ### Size (X & Y) * Controls the shadow position * **X (horizontal)** → moves left or right * **Y (vertical)** → moves up or down 👉 Example: * X: 0, Y: 4 → shadow goes slightly below the element *** ### Blur * Controls how soft the shadow is 👉 Higher value = softer shadow\ 👉 Lower value = sharper shadow *** ### Spread * Controls how wide the shadow spreads 👉 Positive = bigger shadow\ 👉 Negative = tighter shadow *** ### Color * Sets the shadow color (usually black or gray with transparency) 👉 Common: `rgba(0, 0, 0, 0.1–0.3)` for soft shadows *** ## Multiple Shadows * You can click **+ Add** to stack multiple shadows * Useful for more advanced or layered effects # Control Element Dimensions and Sizing Source: https://docs.landerlab.io/features/editor/styles/dimensions Adjust element dimensions to control width, height, and responsiveness for clean and flexible landing page layouts. The Dimensions section lets you control the **size of any element on your canvas**. This helps you manage layout, spacing, and responsiveness. You can find these settings in the **right-side panel** when selecting any element. *** ## Where to Find It 1. Click on any element in the canvas 2. Go to the **right panel** 3. Open the **Dimensions** section Sizes *** ## Size Controls ### Width Controls how wide the element is. ### Height Controls how tall the element is. *** ## Units Explained When setting width or height, you can choose between different units: Image ### px (Pixels) * Fixed size * Does not change based on screen * Best for precise control ### % (Percentage) * Relative to the parent container * Responsive and flexible * Best for layouts that adapt to screen size ### Fit * Automatically adjusts to content * Element grows or shrinks based on what’s inside *** ## Advanced Options Click **More Options** to access: Image ### Min Width / Min Height * Sets the smallest size the element can be ### Max Width / Max Height * Sets the largest size the element can grow to *** ## Example * Width → `100%` * Max Width → `600px` 👉 The element will stretch on smaller screens but stay within 600px on larger screens. *** ## Best Practices * Use **%** for responsive layouts * Use **px** for exact control * Use **Fit** when content size should define the element * Set **max width** to keep layouts clean on large screens # Layout Settings for Element Alignment and Spacing Source: https://docs.landerlab.io/features/editor/styles/layout Control layout settings to align elements, manage spacing, and create clean, responsive landing page designs with ease. The Layout settings control **how elements are arranged inside a container**.\ This is where you decide if items go **side by side, stacked, centered, spaced, etc.** Layout ## The 4 Key Settings ## 1. Direction (Most Important) This controls **how items are placed inside the container**. ### Horizontal (Row) * Elements go **left → right** * Example: buttons next to each other 👉 Use this for: * Rows * Inline elements * Columns side by side ### Vertical (Column) * Elements go **top → bottom** * Example: title → text → button 👉 Use this for: * Forms * Stacked content * Most layouts (default) If something is not aligning correctly, check Direction first — this is the #1 issue users face. *** ## 2. Distribution (Spacing Between Items) This controls **how items are spaced across the container**. Common options: * **Start** → items stick to the beginning * **Center** → items stay in the middle * **End** → items go to the end * **Space Between** → first left, last right, space in between * **Space Around** → equal space around items *** 👉 Example: If you have 3 buttons: * Space Between → spread across full width * Center → grouped in the middle *** ## 3. Align Items (Alignment) This controls alignment on the **opposite axis of Direction**. ### If Direction = Row (horizontal): * Align Items = vertical alignment * Top * Center * Bottom *** ### If Direction = Column (vertical): * Align Items = horizontal alignment * Left * Center * Right **Important:** * Direction = main axis * Align Items = cross axis (This is where most confusion happens) *** ## 4. Gap * Controls space **between elements** * Works like automatic spacing 👉 Example: * Gap = 20 → adds equal spacing between all items *** # Simple Examples ### Example 1: Center everything * Direction: Vertical * Align Items: Center * Distribution: Center 👉 Result: everything perfectly centered *** ### Example 2: Buttons in a row * Direction: Horizontal * Distribution: Space Between * Align Items: Center 👉 Result: buttons spread across horizontally *** ### Example 3: Simple form layout * Direction: Vertical * Align Items: Left * Gap: 10–20 👉 Result: clean vertical form *** ## Common Mistakes ❌ Trying to center elements without changing Direction\ ❌ Confusing Align Items with Distribution\ ❌ Adding margin instead of using Gap\ ❌ Forgetting container controls child elements *** ## Best Practices * Start with **Column** for most layouts * Use **Row only when needed** * Use **Gap instead of manual spacing** * Keep layouts simple and consistent **Golden Rule:**\ If something looks “wrong”, it’s almost always: * Wrong Direction * Wrong Alignment # Link Settings for Navigation and Actions Source: https://docs.landerlab.io/features/editor/styles/link-button-actions Configure link actions to control navigation, track clicks, and manage user interactions across your landing pages. The Link settings define **what happens when a user clicks a button or link**.\ This is how you control navigation, actions, and interactions inside your page. Link *** ## Action Types ### Go To URL * Redirects the user to another page 👉 Example: * External website * Thank you page *** ### Go To Element * Scrolls the user to a specific section on the page 👉 Useful for: * One-page websites * “Scroll to form” buttons *** ### Email To * Opens the user’s email client 👉 Example: * [contact@yourdomain.com](mailto:contact@yourdomain.com) *** ### Phone To * Starts a phone call (mainly on mobile) 👉 Example: * Click to call support *** ### PopUp / Modal * Opens a popup window 👉 Useful for: * Forms * Offers * Extra information *** ## Additional Options ### Open in New Tab * Opens the link in a new browser tab *** ### Track Clicks as Conversions * Tracks button clicks as conversions * Useful for analytics and ads *** ### Pass Through URL Params * Passes URL parameters (like tracking data) to the next page 👉 Example: * UTM parameters * Affiliate tracking *** ## URL Field * Enter the destination URL or action target * Example: * `https://yourwebsite.com` * `#section-id` (for internal scroll) *** ## Text * Controls the button text displayed to users *** ## Best Practices * Always double-check your URL * Use “Go To Element” for smooth on-page navigation * Enable tracking for important buttons * Use clear button text (e.g., “Get Started”, “Submit”) # Control Spacing with Margin and Padding Source: https://docs.landerlab.io/features/editor/styles/spacing Adjust margin and padding to control spacing, improve readability, and create clean, well-structured landing page layouts. The Spacing section controls the **space around and inside elements**. This helps you create clean layouts and proper separation between content. You can find it in the **right-side panel** when selecting any element. *** ## Where to Find It 1. Select an element on the canvas 2. Open the **right panel** 3. Scroll to the **Spacing** section Spacing *** ## Margin vs Padding ### Margin (Outer Space) * Controls space **outside** the element * Pushes the element away from other elements ### Padding (Inner Space) * Controls space **inside** the element * Adds space between the content and the element’s edges *** ## How to Adjust Spacing You can control spacing for each side: * Top * Bottom * Left * Right Each side can be adjusted independently. *** ## Quick Controls ### + / – Buttons * Increase or decrease spacing by **5px steps** * Fast way to fine-tune layout ### Manual Input * Click on a value to type a custom number * You can also choose from quick presets like: * 0 * 10 * 20 * 40 * 60 * 100 * 140 ### Auto Option * Lets the system automatically manage spacing (mainly used for alignment Screenshot 2026 03 25 At 10 25 43 AM *** ## How It Works (Example) * Margin Top → `20px`\ 👉 Adds space above the element * Padding Left → `10px`\ 👉 Pushes content inside away from the left edge *** ## Best Practices * Use **margin** to separate elements * Use **padding** to improve readability inside elements * Avoid too much spacing — keep layouts balanced * Use + / – for quick adjustments instead of guessing values # Use Transform Settings for Visual Effects Source: https://docs.landerlab.io/features/editor/styles/transform Use transform settings to rotate, scale, move, and skew elements for more dynamic and visually engaging landing page designs. The Transform settings let you visually adjust an element by **rotating, resizing, moving, or skewing it**. These changes affect how the element looks, without changing its actual layout position. ## Transform Options ### Rotate * Rotates the element in degrees 👉 Examples: * 0 → normal * 45 → tilted * 90 → sideways *** ### Scale * Resizes the element 👉 Examples: * 1 → original size * 1.2 → slightly bigger * 0.8 → smaller *** ### Move * Shifts the element from its original position 👉 Works like: * Positive values → move right/down * Negative values → move left/up *** ### Skew * Tilts the element diagonally 👉 Creates a slanted effect *** ## Locked Values Some fields may show a lock icon: * Locked → values stay proportional * Unlock → allows independent control # Customize Typography and Text Styles Source: https://docs.landerlab.io/features/editor/styles/typography Customize typography settings like font, size, and spacing to improve readability and create consistent landing page designs. The Typography section controls how your text looks. This includes font, size, spacing, alignment, and more. You can use these settings to match your brand style and improve readability. *** ## Where to Find It 1. Select a text element (headline, paragraph, button text, etc.) 2. Go to the **right panel** 3. Open the **Typography** section *** ## Typography Settings Image ### Font * Choose the font family ### Weight * Controls how bold the text is * Options range from light to bold ### Color * Sets the text color * You can use color picker or RGB values ### Size * Controls text size * Usually in pixels (px) ### Align * Align text: * Left * Center * Right ### Line Height * Controls space between lines of text * Helps improve readability ### Letter Spacing * Controls space between letters * Useful for headings or stylistic text ### Decoration * Add text styles: * Underline * Strikethrough * None ### Case * Controls text formatting: * Uppercase * Lowercase * Capitalized *** ## Important Note (Inheritance) Typography settings follow a **parent → child structure**: * If you apply a font to a **parent element (like a section or container)** * All child elements inside it will **inherit that font automatically** 👉 This only applies if the child elements **don’t have their own font set** ### Example * Set font on a section → *Inter* * All text inside uses *Inter* If you change one text block to another font →\ 👉 Only that block will be different *** ## Best Practices * Set fonts on parent containers for consistency * Override only when needed * Use larger sizes for headlines * Keep body text readable * Avoid too many font styles # Control Visibility and Responsiveness Source: https://docs.landerlab.io/features/editor/styles/visibility Control element visibility across devices and adjust opacity to create responsive and adaptable landing page designs. The Visibility settings control **where your element appears** and **how visible it is**. This helps you adapt your design for different devices and control how elements are shown. ## Where to Find It 1. Select any element 2. Go to the **right panel** 3. Open the **Visibility** section (usually at the bottom) Image *** ## Visibility Options ### Show On (Devices) You can choose where the element is displayed: * **Desktop** → shows on larger screens * **Tablet** → shows on tablet devices * **Mobile** → shows on phones 👉 You can enable or disable any of these depending on your needs *** ### How It Works * If a device is **enabled** → the element is visible there * If a device is **disabled** → the element is hidden on that device 👉 This is useful for responsive design ### Example * Show on Desktop: ON * Show on Tablet: OFF * Show on Mobile: OFF 👉 Result: element only appears on desktop *** ## Opacity Opacity controls how transparent an element is. * **100%** → fully visible * **0%** → completely invisible * **50%** → semi-transparent ### How to Use It * Lower opacity to create softer elements * Use it for overlays or subtle effects # Manage Global Colors for Landing Pages Source: https://docs.landerlab.io/features/editor/theme/colors Define global colors for your landing pages to maintain consistent branding and easily control design across all elements. The Colors section defines your **global color system**. The global Colors panel in LanderLab, with primary, secondary, background, and text color settings ## Available Options * **Primary** → Main brand color (buttons, highlights, active elements) * **Secondary** → Supporting color for accents and variations * **Background** → Default background color of your page * **Text Primary** → Main text color * **Text Secondary** → Secondary or lighter text color ## How It Works When you set colors here: * They automatically apply across your entire page * Buttons, text, and elements inherit these colors by default * You can still override colors on individual elements if needed # Manage Global Fonts and Typography Source: https://docs.landerlab.io/features/editor/theme/fonts Set global fonts to ensure consistent typography, improve readability, and maintain a clean design across your landing pages. Fonts define how your text looks across your entire page.
By setting them once, you ensure a consistent and professional design everywhere. *** ## Where to Find It 1. Open the **Theme panel** 2. Go to the **Fonts section** The Fonts section of the LanderLab Theme panel, with separate Headings and Page font settings You’ll see two main options: * **Headings** → Used for titles and large text * **Page** → Used for paragraphs and regular text *** ## How Fonts Work * Fonts set here apply **globally** across your page * All text elements automatically inherit these fonts * You don’t need to style each block individually 💡 Tip: Keeping fonts consistent improves readability and design quality. *** ## Manage Fonts Click **Manage Fonts** to open the font library. The LanderLab font library, listing available fonts with a search box and the number of weights each font includes Here you can: * Browse available fonts * Search for specific fonts * Add new fonts to your project * See how many font weights each font includes Once added, fonts become available in your Theme settings. *** ## Important Notes * Adding too many fonts can **slow down your page** * Stick to **1–2 fonts maximum** for best performance * Choose fonts that are easy to read on all devices *** ## Best Practice * Use one font for **Headings** * Use one font for **Body text (Page)** * Keep it simple and consistent # Live Mode in the LanderLab Editor - Preview JavaScript Effects Source: https://docs.landerlab.io/features/editor/toolbar/live-mode Learn how to use Live Mode in the LanderLab editor to preview JavaScript-powered features like popups and mouse effects, and how to switch back to Edit Mode. ## What Is Live Mode? Live Mode is a preview state inside the LanderLab editor that lets you see all JavaScript-powered elements on your landing page exactly as visitors will experience them. The editor normally blocks JavaScript from running. This is intentional. It keeps the editing experience clean and prevents unexpected behaviors while you are building. However, some features, like popups, mouse effects, scroll animations, or any other dynamic interaction, require JavaScript to work. Live Mode is how you see all of that in action without leaving the editor. The LanderLab editor in Live Mode, with the Live Mode button active in the top-right corner *** ## When to Use Live Mode Use Live Mode when you want to: * Preview popups, overlays, or modals you have added to the page * Check mouse-follow or hover effects * Test any custom JavaScript interactions or third-party scripts * Review what the AI builder has generated after a refinement, since the AI mode automatically switches you to Live Mode so you can see the full result including any JS effects *** ## How to Enter Live Mode There are two ways to enter Live Mode: 1. **From the bottom toolbar** - Click the Play button (the triangle icon) in the editor toolbar at the bottom of the screen. 2. **Automatically** - Whenever the AI mode applies a refinement to your page, the editor switches to Live Mode so you can immediately see the output with all JavaScript running. Once you are in Live Mode, the editor panel is disabled. You cannot select or edit elements while in this state. This is expected behavior. *** ## How to Go Back to Edit Mode There are two ways to return to editing: 1. **From the bottom toolbar** - Click the Pencil icon in the toolbar. This replaces the Play button when you are in Live Mode. 2. **From the top-right button** - Hover over the "Live Mode" button in the top-right corner of the editor. It will change to say "Go to Edit Mode." Click it to return. *** ## Using AI Mode in Live Mode You do not need to exit Live Mode to continue working with AI. The AI mode panel stays accessible while Live Mode is active. You can keep sending prompts, requesting changes, or refining your page. Each time the AI applies an update, Live Mode refreshes so you can immediately see the result. # Version History in the LanderLab Editor - Restore a Previous Version Source: https://docs.landerlab.io/features/editor/version-history Learn how to use Version History in the LanderLab editor to view earlier versions of your landing page and restore a previous version in one click. ## What Is Version History? Version History lets you look back at earlier versions of your landing page and bring any of them back. As you build and make changes, LanderLab keeps a record of previous versions, so nothing you worked on is truly lost. If you change your mind about an edit, prefer how a section looked before, or just want to undo a series of changes, you can open Version History and restore an older version in a few clicks. You will find it in the left sidebar of the editor, near the bottom. The Version History panel in the LanderLab editor, listing earlier versions of a landing page ## When to Use Version History Version History is useful when you want to: * Undo changes after a heavy editing session * Go back to a layout or design you liked better in an earlier version * Recover a section or element you removed by mistake * Compare your current page against how it looked before ## How to Open Version History Go to the landing page you want to review and open it in the LanderLab editor. In the left sidebar, near the bottom, click the **Version History** icon. A panel opens showing your earlier versions of the page. Look through the list to find the version you want. Each entry represents an earlier state of your landing page. ## How to Restore a Previous Version In the Version History panel, choose the version you want to bring back. Click **Restore** to apply that version to your landing page. Your page is updated to match the version you selected. Check the page to confirm everything looks the way you expect, then save your changes. Restoring a version replaces what is currently on your page with the version you picked. Review the page after restoring to make sure it is exactly what you want before you publish. Not sure about a big change? Save your current work first, then experiment freely. If the new direction does not work out, you can always return to Version History and restore an earlier version. # How to Use a Global Block on a Landing Page in LanderLab Source: https://docs.landerlab.io/features/global-block/usage Learn how to add a global block to a landing page in LanderLab, edit it from the page, and detach it. Global blocks work like sections and stay in sync across every page. Once you have created a global block, you add it to a landing page the same way you would add a section. This guide covers dropping a global block onto a page, editing it in place, and detaching it when you need a one-off version. A global block stays connected to its source. Editing it updates every page where it appears. If you want a change that only affects one page, detach the block first (see [How to detach a global block](#how-to-detach-a-global-block)). ## How to add a global block to a landing page Open the landing page you want to add the global block to in the editor. In the left toolbar, click the **Global Blocks** icon, just below the blue **+** button. The panel lists every global block you have created, with a search bar to find one quickly. Use Global Block Global blocks work just like sections. Drag the block from the panel onto the canvas where you want it, then position it like any other section on the page. ## How to edit a global block from the page Select the block on the canvas. In the right sidebar you will see the **Global Block** panel, which reminds you that the block's content is edited in the Global Block Editor and applies to every page using it. Image Click **Edit** to open the Global Block Editor in a new tab. Make your changes by hand or with the AI Assistant, then click **Save & Publish**. The update goes live on the page, and on every other page that uses the block. You can also **double-click** the block on the canvas to open the Global Block Editor in a new tab. From the same right sidebar you can adjust this placement's **Opacity** and use **Show On** to control which devices the block appears on (desktop, tablet, or mobile). ## How to detach a global block Detaching disconnects the block on this page from its global source. Click **Detach** in the right sidebar and the block becomes a regular, standalone block on this page. After detaching, updates to the global block no longer reach this page, and any changes you make here do not affect the global block or any other page that uses it. Detach when you need a one-off version for a single page. Once a block is detached, it stops receiving updates from the global block, so you will have to edit it manually from then on. # How to Create a Global Block in LanderLab Source: https://docs.landerlab.io/features/global-blocks/create-and-edit Learn how to create a global block in LanderLab using AI or from scratch, refine it in the editor, then save and publish to reuse it across every landing page. Global blocks let you build a block once, like a navbar, footer, or CTA, and reuse it across every landing page. You can generate one with AI, pick a preset, or start from scratch, then keep refining it until it is ready to drop anywhere. This guide walks through creating a global block and updating it later. Global blocks stay connected across pages. When you update a global block, the change applies to every page where it appears. If you need a one-off version for a single page, use a regular saved component instead. ## How to create a global block In the left sidebar, under **Assets**, click **Global Blocks**, then click **Add Global Block**. The Global Blocks section under Assets in the LanderLab sidebar, with the Add Global Block button You are taken to the **Create a global block** screen. From here you can: * **Describe it and let AI build it.** Type what you want in the prompt box, for example a sticky navbar with a logo, links, and a CTA button. * **Pick a preset.** Choose a starting point like **Navbar**, **Footer**, **Testimonials**, **FAQ section**, or **CTA banner**. * **Create From Scratch.** Click **Create From Scratch** to build the block yourself in the editor. The Create a global block screen, with an AI prompt box and presets for navbar, footer, testimonials, FAQ, and CTA banner Once the block is generated, keep iterating with the **AI Assistant** or edit it by hand in the editor, exactly like you would on a normal page. Adjust the copy, links, images, and styling until it looks the way you want. When you are happy with it, click **Save & Publish**. Your global block is now ready to drop onto any landing page. The Save and Publish button in the global block editor For affiliate and paid traffic campaigns, put your offer link inside a global block. Swapping offers later becomes a one-click change across every page instead of a manual edit on each lander. ## How to update a global block Updating works the same way as building it. Open the global block in the editor, make your changes by hand or iterate with the **AI Assistant**, then click **Save & Publish**. The update applies automatically to every page where the block is used, so you never have to edit each page one by one. Editing a global block changes it on every page where it appears. If you need a version that is different on just one page, use a regular saved component instead so your change stays local to that page. # Global Blocks in LanderLab: Build Once, Update Everywhere Source: https://docs.landerlab.io/features/global-blocks/get-started Learn what global blocks are in LanderLab and how to reuse navbars, footers, and CTAs across every landing page. Edit once and update all pages instantly. Global blocks let you build a block one time and reuse it across as many landing pages as you want. Because the block stays global, any change you make to the original updates every page it appears on automatically. There is no need to edit each page by hand. Global blocks stay connected across pages. Editing the original updates every copy instantly. This is different from saving a section as a component, where each copy is independent and changes are not shared. ## What are global blocks? A global block is a reusable block, like a navbar or footer, that you design once and place on multiple pages. Every instance points back to the same source, so the content, links, and styling stay in sync everywhere. When you update the source block, for example changing a link in your navbar, that update applies to every page that uses it. You never have to open each page and change it manually. ## Why use global blocks * **Edit once, update everywhere.** Change a link or a line of text in one place and every page updates automatically. * **Consistency across pages.** Navigation, links, and messaging stay identical on every landing page. * **Faster workflow.** Reuse the same building blocks instead of rebuilding or copy-pasting them for each new page. * **Fewer mistakes.** One source of truth means no broken or outdated links left behind on older pages. ## Common use cases Global blocks work best for anything that should look and behave the same across every page. **Navigation and structure** * **Navbar.** Keep the same menu, logo, and links on every page. Update one link and it changes everywhere. * **Footer.** Maintain consistent contact details, social links, and legal links across your whole site. **For media buyers and performance marketers** * **Offer CTA blocks.** Reuse the same call-to-action section across a campaign. When you rotate or swap an offer, update the link once and every landing page points to the new offer instantly. * **Compliance and legal blocks.** Keep advertiser disclosures, privacy links, and terms consistent across every page. When a network or regulation requires a wording change, update it in one place. * **Promo and announcement bars.** Run the same limited-time offer or announcement across all pages, then update or remove it everywhere at once when the promotion ends. * **Trust blocks.** Reuse testimonial rows, review badges, or partner logos so every page in a funnel carries the same social proof. For affiliate and paid traffic campaigns, put your offer link inside a global block. Swapping offers later becomes a one-click change across every page instead of a manual edit on each lander. Editing a global block changes it on every page where it appears. If you need a one-off version for a single page, use a regular saved component instead so your change stays local to that page. # How to Use a Global Block on a Landing Page in LanderLab Source: https://docs.landerlab.io/features/global-blocks/use-global-block Learn how to add a global block to a landing page in LanderLab, edit it from the page, and detach it. Global blocks work like sections and stay in sync across every page. Once you have created a global block, you add it to a landing page the same way you would add a section. This guide covers dropping a global block onto a page, editing it in place, and detaching it when you need a one-off version. A global block stays connected to its source. Editing it updates every page where it appears. If you want a change that only affects one page, detach the block first (see [How to detach a global block](#how-to-detach-a-global-block)). ## How to add a global block to a landing page Open the landing page you want to add the global block to in the editor. In the left toolbar, click the **Global Blocks** icon, just below the blue **+** button. The panel lists every global block you have created, with a search bar to find one quickly. Use Global Block Global blocks work just like sections. Drag the block from the panel onto the canvas where you want it, then position it like any other section on the page. ## How to edit a global block from the page Select the block on the canvas. In the right sidebar you will see the **Global Block** panel, which reminds you that the block's content is edited in the Global Block Editor and applies to every page using it. Image Click **Edit** to open the Global Block Editor in a new tab. Make your changes by hand or with the AI Assistant, then click **Save & Publish**. The update goes live on the page, and on every other page that uses the block. You can also **double-click** the block on the canvas to open the Global Block Editor in a new tab. From the same right sidebar you can adjust this placement's **Opacity** and use **Show On** to control which devices the block appears on (desktop, tablet, or mobile). ## How to detach a global block Detaching disconnects the block on this page from its global source. Click **Detach** in the right sidebar and the block becomes a regular, standalone block on this page. After detaching, updates to the global block no longer reach this page, and any changes you make here do not affect the global block or any other page that uses it. Detach when you need a one-off version for a single page. Once a block is detached, it stops receiving updates from the global block, so you will have to edit it manually from then on. # Create Landing Page from Scratch Source: https://docs.landerlab.io/features/landing-pages/create/from-scratch Learn how to create landing pages from scratch in LanderLab using the visual builder to design high-converting pages for paid traffic. Landerlab gives you several ways to create landing pages, you can use ready-made templates, upload ZIP file, or import from URLs. But if you want total control over your design, starting from scratch with a blank template is the way to go. Group24 1. Log in to Landerlab and head over to the **Landing Pages** section. 2. Click **Add Landing Page** in the top-right corner. 3. From the options that appear, select **Choose from Template**. 4. Find the blank template in the list and click **Use Template**. 5. Give your landing page a name that makes sense to you, then click **Create Landing Page** That's it! Your blank page will open right in the editor, ready for you to start designing. Even though you're starting from scratch, you don't have to build everything manually. The visual editor includes pre-made sections and elements you can drop right into your page. These save a ton of time while still letting you customize everything to fit your vision. Use them to speed up your workflow so you can focus on creating a landing page that actually converts. # Create Landing Page from Template Source: https://docs.landerlab.io/features/landing-pages/create/from-template Create high-converting landing pages fast using templates in LanderLab, built for paid traffic and performance marketing campaigns. Creating a landing page in **LanderLab** is quick and easy using our **ready-made templates**. Templates help you launch pages faster by giving you a pre-built layout that you can customize for your campaign. Follow the steps below to create a landing page from a template. The LanderLab template library, showing pre-built landing page layouts with category filters ## How to Create a Landing Page from a Template ### 1. Log in to LanderLab Sign in to your **LanderLab account** and navigate to the **Landing Pages** section. ### 2. Click “Add Landing Page” Click **Add Landing Page** in the top-right corner to open the page creation options. ### 3. Choose “Create from Template” Select **Create From Template** to open the template library. ### 4. Browse the template library Browse the available templates and choose one that fits your campaign. You can use the **category filters** to quickly find templates designed for specific use cases such as advertorials, pre-sell pages, or listicles. ### 5. Select a template When you find the template you want to use, click **Use Template**. ### 6. Name your landing page Enter a name for your landing page so you can easily identify it later. ### 7. Create the landing page Click **Create Landing Page** to finish. Your page will open in the **visual editor**, where you can customize the layout, content, images, and calls-to-action before publishing. **Tip:** Templates are a great starting point if you want to **launch campaigns quickly while still having full control over customization.** # Import Landing Page from URL in LanderLab Source: https://docs.landerlab.io/features/landing-pages/create/import-from-url Import landing pages from a URL in LanderLab and customize them to quickly create and launch your own pages Found a landing page online that caught your eye? Landerlab lets you import it directly from its URL and use it as a starting point for your own design. It's a quick way to get inspired and build something similar without starting from scratch. URL Important: This feature works best with clean HTML landing pages. Pages built with WordPress or other CMS platforms may not import correctly or display properly in the editor. Here's how to import a landing page from a URL: 1. Log in to Landerlab and go to **Landing Pages**. 2. Click **Add Landing Page** in the top-right corner. 3. Select **Import from URL** from the options. 4. Paste the public URL of the landing page you want to import, then click **Continue**. 5. Give your landing page a name and click **Create Landing Page**. Done! Landerlab will take a few seconds to import the page, then it'll open automatically in the editor where you can customize it however you want. # Create Landing Pages with AI Source: https://docs.landerlab.io/features/landing-pages/create/with-ai Generate landing pages instantly with AI by describing your campaign and customize them to launch faster without starting from scratch. LanderLab allows you to generate landing pages instantly using **AI**. Instead of starting from a template or building everything manually, you can simply describe what you want to create and the AI will generate a landing page structure for you. This is the fastest way to create pages for **advertorials, listicles, pre-sell pages, or pay-per-call campaigns**. The LanderLab AI prompt screen asking what you want to create, with preset prompts for advertorial, listicle, pre-sell, and pay-per-call pages ## How to Create a Landing Page with AI ### 1. Go to the Landing Pages section Log in to **LanderLab** and navigate to the **Landing Pages** section in your dashboard. ### 2. Click “Add Landing Page” Click **Add Landing Page** in the top-right corner to open the page creation screen. ### 3. Use the AI prompt field At the top of the screen you will see the AI prompt asking: **“What do you want to create?”** Type a short description of the landing page you want the AI to generate. ### 4. Use preset prompts (optional) Above the prompt field you will see **preset prompts** that help you quickly start your request. Examples include: * **Advertorial** * **Listicle** * **Pre-sell page** * **Pay-per-call page** Clicking one of these will automatically insert a **starter prompt** that you can modify before generating the page. ### 5. Generate the landing page Once your prompt is ready, click the **generate arrow** to create the landing page. LanderLab AI will generate a **complete landing page structure**, including sections and content based on your prompt. ### 6. Customize the page in the editor After the page is generated, it will open in the **visual builder** where you can edit: * Text and headlines * Images and sections * Layout and structure * Calls-to-action From there you can fully customize the page before publishing it. The more specific your prompt is, the better the AI can generate a landing page that matches your campaign. # Upload Landing Page from ZIP File Source: https://docs.landerlab.io/features/landing-pages/create/with-zip Upload landing pages from a ZIP file and easily customize them to launch fully designed pages without rebuilding from scratch. Got a custom-designed landing page you want to use in Landerlab? No problem. Just pack everything into a ZIP file—all the HTML, CSS, images, and subfolders—and upload it to your account. From there, you can host, edit, and customize it however you need. ZIP Make sure your ZIP file includes everything your landing page needs to work properly. Missing files or folders can cause display issues or broken functionality. Here's how to upload your landing page from a ZIP file: 1. Log in to Landerlab and go to **Landing Pages**. 2. Click **Add Landing Page** in the top-right corner. 3. Select **Upload from ZIP** from the options. 4. Click the center box to browse for your ZIP file, or just drag and drop it into the dashed area. Then click **Continue**. 5. Give your landing page a name and click **Create Landing Page**. That's it! Your custom landing page is now in your Landerlab account and will open automatically in the visual editor. You can customize and tweak it from there to match your exact needs. # Create Landing Pages Inside Folders Source: https://docs.landerlab.io/features/landing-pages/folders/add-lander Create landing pages inside folders to keep campaigns organized and manage funnels, projects, and pages more efficiently. You can create landing pages directly inside a folder to keep your projects organized. This is useful when managing **multiple funnels, campaigns, or niches**, as it keeps related pages grouped together. Follow the steps below to add a landing page to a specific folder. ## Step-by-Step Guide ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Open the folder Locate the folder where you want to add the landing page and click on it. ### 3. Click “Add Landing Page” Inside the folder, click **Add Landing Page** in the **top-right corner** of the screen. ### 4. Choose how to create the page Select your preferred method for creating the landing page, such as: * Using **AI generation** * Choosing a **template** * Building **from scratch** * **Importing from a URL** * **Uploading a ZIP file** ### 5. Create the landing page Once the page is created, it will **automatically be saved inside the folder** you created it from. The landing page will then open in the **visual editor**, where you can start customizing it. # Organize Landing Pages with Folders Source: https://docs.landerlab.io/features/landing-pages/folders/create Organize landing pages with folders to manage projects, campaigns, and funnels more efficiently and keep your workspace structured. Folders help you keep your **landing pages organized and easy to manage**. By grouping related pages together, you can quickly locate projects and keep your workspace structured. In this guide, we’ll explain the benefits of using folders and show you how to create them. ## Why Use Folders? Folders are useful for organizing landing pages in different ways depending on your workflow. Common use cases include: * **Project organization** – Group all landing pages related to the same project. * **Vertical or niche grouping** – Organize pages by industry or campaign type. * **Funnel management** – Keep all landing pages belonging to the same funnel together. Using folders makes it much easier to **manage multiple campaigns and quickly find the pages you need**. Addfolder ## How to Create a Folder Follow the steps below to create a new folder. ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Click the new folder icon In the top-right corner of the screen, click the **New Folder icon**. ### 3. Name your folder Enter a name for your folder that helps you identify its contents. ### 4. Create the folder Click **Create Folder** to finish. Your new folder will now appear in your landing pages section, where you can start organizing your pages. # Delete Folders Source: https://docs.landerlab.io/features/landing-pages/folders/delete Delete folders to clean up your workspace while keeping all landing pages safe and accessible in your main list. You can delete folders if they are no longer needed. This helps keep your workspace organized and remove unused project structures. Delete **Before you begin:**\ Deleting a folder will **not delete the landing pages inside it**. All landing pages will simply be moved back to the **main landing pages list**. ## Step-by-Step Guide ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Locate the folder Find the folder you want to delete. ### 3. Open the folder menu Click the **three-dot menu (•••)** on the right side of the folder. ### 4. Select Delete Click **Delete** from the list of options. ### 5. Confirm deletion Click **Delete** again to confirm. The folder will be removed, and any landing pages that were inside it will be **moved back to the main landing pages section**. # Move Landing Pages to Folders Source: https://docs.landerlab.io/features/landing-pages/folders/move-lander Move landing pages into folders to better organize campaigns, group related pages, and manage your workspace more efficiently. You can move existing landing pages into folders to keep your projects organized. This helps when restructuring campaigns or grouping related pages together. Follow the steps below to move a landing page to a specific folder. Movetop ## Step-by-Step Guide ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Find the landing page Locate the landing page you want to move. ### 3. Open the page menu Click the **three-dot menu (•••)** on the right side of the landing page. ### 4. Select “Move to Folder” From the list of available options, click **Move to Folder**. ### 5. Choose the folder Select the folder where you want the landing page to be moved. ### 6. Confirm the action Click **Move Landing Page** to complete the process. Your landing page will now appear inside the selected folder. # Remove Landing Pages from Folders Source: https://docs.landerlab.io/features/landing-pages/folders/remove-lander Remove landing pages from folders to reorganize your workspace and manage pages more flexibly across campaigns. You can remove a landing page from a folder at any time. This is useful if you want to reorganize your pages or move them back to the main landing pages list. Follow the steps below to remove a landing page from a folder. Remove ## Step-by-Step Guide ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Open the folder Locate the folder that contains the landing page and click on it. ### 3. Find the landing page Inside the folder, locate the landing page you want to remove. ### 4. Open the page menu Click the **three-dot menu (•••)** on the right side of the landing page. ### 5. Select “Remove from Folder” From the available options, click **Remove from Folder**. Once removed, the landing page will be **moved back to the main landing pages list**. # Rename Folders for Better Organization Source: https://docs.landerlab.io/features/landing-pages/folders/rename Rename folders to keep landing pages organized and align your workspace with campaigns, funnels, and projects You can rename folders at any time to better match your **campaign, funnel, or project name**. This helps keep your landing pages organized and easy to manage. Follow the steps below to rename a folder. Rename ## Step-by-Step Guide ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Locate the folder Find the folder you want to rename in the list. ### 3. Click the edit icon Hover over the folder name and click the **pen (edit) icon** that appears on the right side. ### 4. Enter the new name In the **Rename Folder** dialog box, type the new name for your folder. ### 5. Confirm the change Click **Rename Folder** to save the updated name. Your folder will now display the new name. # Get Started with Landing Pages Source: https://docs.landerlab.io/features/landing-pages/get-started Learn how to create your first landing page in LanderLab. Choose from AI generation, templates, scratch, URL import, or ZIP upload - and launch faster. There are five ways to create a landing page in LanderLab. Pick the one that fits your workflow. *** ## Create with AI **Best for:** Getting a full page up and running in seconds. Describe your campaign, the product, audience, and goal, and LanderLab's AI instantly generates a complete landing page with copy, structure, and layout. Works great for advertorials, listicles, pre-sell pages, and pay-per-call campaigns. Generate a landing page instantly using AI *** ## Create from Scratch **Best for:** Full creative control with no constraints. Start with a blank canvas and build exactly what you have in mind. The visual editor includes pre-made sections and elements you can drag in to speed things up without locking you into a layout you didn't choose. Build a landing page from a blank template *** ## Create from a Template **Best for:** Launching quickly with a proven layout. Browse a library of ready-made templates designed for specific campaign types like advertorials, pre-sell pages, and listicles. Pick one, name it, and open it in the editor. Customization takes minutes. Use a pre-built template to launch faster *** ## Import from a URL **Best for:** Recreating or drawing inspiration from a page you found online. Paste a public URL and LanderLab will import the page directly into your account, ready to edit. Works best with clean HTML landing pages. Pages built on WordPress or other CMS platforms may not import correctly. Import a live landing page from a URL *** ## Upload from ZIP **Best for:** Bringing in a custom-designed page you already have. Pack your HTML, CSS, images, and subfolders into a ZIP file and upload it directly. Your page will appear in the editor ready for hosting and customization. Upload a custom landing page from a ZIP file *** ## Not Sure Which to Choose? Here's a quick cheat sheet: | Situation | Best Method | | ------------------------------------------- | --------------- | | I need something live in under a minute | AI Builder | | I have a clear vision and want full control | From Scratch | | I want a head start with a proven layout | From Template | | I found a page online I want to model | Import from URL | | I already have a designed page ready | Upload ZIP | *** ## What's Next? Once your landing page is created, you can: * **Edit it** in the visual editor to adjust text, images, sections, and CTAs * **Connect a domain** via [Manual Connection](https://docs.landerlab.io/features/domain/manual-connection) or Cloudflare * **Run A/B tests** with [A/B Testing](https://docs.landerlab.io/features/analytics/ab-testing) * **Collect leads** and manage them in the Leads section * **Build a quiz funnel** with [Get Started with Quizzes](https://docs.landerlab.io/features/quizzes/get-started) The more specific your AI prompt or template choice, the less editing you'll need to do. Start with the method closest to your end goal. # Add Landing Pages to Tracker Source: https://docs.landerlab.io/features/landing-pages/operations/add-to-tracker Add landing pages to trackers like Voluum or ClickFlare to track performance, manage campaigns, and streamline your workflow. LanderLab integrates directly with popular **click tracking platforms** such as **ClickFlare** and **Voluum**. This allows you to quickly add your landing pages to your tracker and start using them in your campaigns. ## Requirements Before you begin, make sure you have the following: * An **active LanderLab account** * An **active Voluum or ClickFlare account** * A configured **ClickFlare or Voluum integration** in LanderLab * A **published landing page** ## Step-by-Step Guide Follow the steps below to add a landing page to your tracker. ### 1. Log in to LanderLab Sign in to your **LanderLab account**. ### 2. Locate the landing page Find the **published landing page** you want to add to your tracker. ### 3. Open the page menu Click the **three-dot menu (•••)** on the right side of the landing page name. ### 4. Select “Add to Tracker” From the dropdown options, click **Add to Tracker**. ### 5. Configure the tracker settings In the **Add Landing Page to Tracker** screen: * Select the **tracker account** where the landing page will be added * Enter a **name for the landing page** so you can easily identify it in your tracking platform * *(Optional)* Add **tracking tokens/macros** to the landing page URL parameters * Specify the **number of CTAs (Call-to-Actions)**, also known as the number of offers for the landing page * *(Optional)* Add any **notes** for reference Screenshot2026 03 12at1 58 12PM ### 6. Add the landing page to the tracker Click **Add to Tracker** to complete the process. ### 7. Choose whether to add the tracking script After adding the landing page, a prompt will appear asking if you want to **include your tracker’s tracking script** in the landing page. You have two options: * **Cancel** – Finalizes the process without adding the tracking script. * **Continue** – Automatically adds the tracker’s **tracking script** to the **Custom Code section** of your landing page. Image Custom 1 ## When Should You Add the Tracking Script? Adding the tracking script is **not always required**. We recommend adding it when the landing page is used in campaigns **without redirects**, so the tracker can properly record visits and events. **Tip:** Using the tracker integration helps you **quickly deploy landing pages into campaigns without manually copying URLs or configuring tracking parameters.** # Download Landing Page as ZIP File Source: https://docs.landerlab.io/features/landing-pages/operations/download Download landing pages as ZIP files with all assets included to back up, reuse, or host them on your own server. LanderLab allows you to **download a complete copy of your landing page**, including all HTML, CSS, JavaScript, and media assets, packaged in a single **.zip file**. The three-dot menu on a landing page in LanderLab, with the Download option selected This is useful if you want to: * Create a **backup** of your landing page * **Export your design** for external use * **Host the page on your own server** ## Step-by-Step Guide Follow these steps to download your landing page: ### 1. Go to the Landing Pages section From your **LanderLab dashboard**, navigate to the **Landing Pages** section. ### 2. Find the landing page Locate the landing page you want to download in your list of pages. ### 3. Open the page menu Click the **three-dot menu** on the right side of the landing page. ### 4. Select Download From the dropdown menu, click **Download**. ### 5. Wait for the export LanderLab will prepare your landing page for export. Once the process is complete, the **.zip file will download automatically**. The file will appear in your computer’s **default downloads folder**, usually named after your landing page. ## What’s Included in the Download? Your exported **.zip file** contains everything needed to host the landing page on any server: * **HTML file** — the main structure of your landing page * **CSS files** — styling and layout rules * **JavaScript files** — page functionality and interactions * **Images and media assets** — all images, icons, and videos used on the page You can upload this package to **any hosting provider** or keep it as a **local backup of your landing page**. # Duplicate a Landing Page Source: https://docs.landerlab.io/features/landing-pages/operations/duplicate Duplicate landing pages to quickly create variations, reuse designs, and scale campaigns without rebuilding from scratch. Duplicating landing pages is a powerful way to **save time and maintain consistency** across your campaigns. Instead of building a page from scratch, you can quickly create a copy of an existing page and modify it as needed. ## Why Duplicate a Landing Page? Common reasons for duplicating pages include: * Quickly creating new pages with the **same layout and structure** * Reusing **design elements and functionality** * Maintaining **branding and design consistency** across campaigns * Creating variations of a page for different offers or traffic sources **Note:** Duplicating a page is **not the same as A/B testing**.\ If you want to test different versions of a landing page, make sure to use the **A/B Test feature** instead. Duplicater ## How to Duplicate a Landing Page Follow the steps below to duplicate a landing page. ### 1. Go to Landing Pages From the **left-side menu**, click **Landing Pages**. ### 2. Find the landing page Locate the landing page you want to duplicate. ### 3. Open the page menu Click the **three-dot menu (•••)** on the right side of the landing page. ### 4. Select Duplicate Click **Duplicate** from the list of available options. A copy of the landing page will be created automatically, and you can then edit it as needed. **Tip:** Duplicating pages is useful when creating **multiple campaign variations or targeting different audiences with similar landing pages**. # Move Landing Pages Between Workspaces Source: https://docs.landerlab.io/features/landing-pages/operations/move-to-workspace Move landing pages between workspaces to organize projects, manage team access, and keep campaigns structured across accounts. You can move landing pages between different **workspaces** within your LanderLab organization. This helps keep projects organized and ensures the right teams have access to the pages they need. Moveworkspace ## Step-by-Step Guide Follow the steps below to move a landing page to another workspace. ### 1. Go to Landing Pages From your **LanderLab dashboard**, navigate to the **Landing Pages** section. ### 2. Find the landing page Locate the landing page you want to move. ### 3. Open the page menu Click the **three-dot menu (•••)** on the right side of the landing page. ### 4. Select “Move To Workspace” From the dropdown menu, click **Move To Workspace**. ### 5. Choose the destination workspace In the modal window that appears, select the **workspace** where you want to move the landing page. ### 6. Confirm the action Click **Move Landing Page** to complete the process. After confirming, you will see a **success message**. The landing page will be removed from the current workspace and will appear in the **destination workspace’s landing pages list**. **Tip:** You must have **access to both workspaces** in order to move landing pages between them. # Publish a Landing Page Source: https://docs.landerlab.io/features/landing-pages/operations/publish Publish landing pages with a custom URL and make them live instantly to share, track, and launch your campaigns. Publishing a landing page makes it **live and accessible to visitors** through a unique, shareable URL. Once published, anyone with the link can view your page. Publish ## Step-by-Step Guide ### 1. Open the landing page overview From the **Landing Pages** list, click the **title of the landing page** you want to publish. ### 2. Click “Publish” On the overview screen, click the **Publish** button located in the **top-right corner**. ### 3. Choose your domain and URL path In the **Publish Your Landing Page** modal, select: * The **domain** where the page will be hosted * The **URL path** for the page ### 4. Confirm publishing Click **Publish Landing Page** to finalize the process. After publishing, a confirmation message will appear and you will see the **live URL** for your landing page. You can copy and share this link immediately. **Tip:** You can republish your page after making changes. The URL will remain the same unless you change the **domain or path**. # Republish a Landing Page Source: https://docs.landerlab.io/features/landing-pages/operations/republish Republish landing pages to update the live version with your latest changes and keep your content current and optimized. Republishing updates the **live version of your landing page** with the latest changes you saved in the editor. This replaces the current live version with the updated one. Republish ## Step-by-Step Guide ### 1. Open the landing page overview From the **Landing Pages** list, click the **title of the page** you want to update. ### 2. Click “Republish” On the **top-right corner** of the overview screen, click the **Republish** button. If there are unpublished changes, you may see a message indicating **“Unpublished changes.”** ### 3. Review the domain and path A **Republish Your Landing Page** modal will appear. The **domain and path fields** will be pre-filled with the current live URL settings. Review the settings and update the **URL path** if needed. ### 4. Confirm republishing Click **Republish Landing Page** to finalize the update. A confirmation message will appear, and your **updated landing page will go live immediately**. **Tip:** Republishing is required whenever you make changes in the editor and want those updates to appear on the **live version of your landing page**. # Unpublish a Landing Page Source: https://docs.landerlab.io/features/landing-pages/operations/unpublish Unpublish landing pages to take them offline without deleting them and manage when your pages are accessible to visitors. Unpublishing a landing page makes it **inaccessible to visitors**. The live URL will no longer display your page, allowing you to take it offline without deleting it. Unpublish ## Step-by-Step Guide ### 1. Open the landing page overview From the **Landing Pages** list, click the **title of the landing page** you want to unpublish. ### 2. Open the options menu On the **top-right corner** of the overview screen, click the **three-dot menu (•••)** next to the **Republish** button. ### 3. Select “Unpublish” From the dropdown menu, click **Unpublish**. ### 4. Confirm the action A confirmation modal titled **Unpublish Landing Page** will appear. Click **Unpublish** to confirm and take the page offline. The landing page will immediately become **unavailable to visitors**. # Add Custom Code to Landing Pages Source: https://docs.landerlab.io/features/landing-pages/settings/custom-code Add custom code to landing pages to integrate tracking scripts, analytics tools, and third-party widgets for enhanced functionality. The **Custom Code** section allows you to add custom JavaScript to your landing page. This is useful when integrating external tools such as **tracking scripts, analytics platforms, or third-party widgets**. You can add scripts that run either in the **page header** or **before the closing body tag**, depending on how the script needs to load. ## Where Custom Code Can Be Added Inside the **Custom Code** settings you will find two script placement areas: | Location | Description | | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Inside**`` | Scripts placed here load early when the page loads. This is commonly used for analytics tools, tracking pixels, or scripts that must initialize before the page renders. | | **Before**`` | Scripts placed here load after the page content. This is ideal for trackers, widgets, and scripts that should run after the page has finished loading. | ## How to Add Custom Code Follow the steps below to add custom JavaScript to your landing page. ### 1. Open your landing page Go to **Landing Pages** and click the **name of the landing page** you want to edit. ### 2. Open the Settings panel Click the **Settings** tab on the landing page overview screen. ### 3. Go to Custom Code From the settings menu on the left side, select **Custom Code**. ### 4. Add your script Paste your JavaScript code into one of the available fields: * **Custom Code inside** `` * **Custom Code before** `` Make sure your code includes the proper `` **tags**. ### 5. Save your changes Click **Save Settings** to apply the custom code. Group34 ## When to Use Custom Code Custom code is commonly used for: * **Click tracking scripts** * **Analytics tools (Google Analytics, etc.)** * **Third-party widgets** * **Conversion tracking scripts** * **Custom JavaScript functionality** **Tip:** If you're adding **tracker scripts (like ClickFlare or Voluum)**, they are usually placed **before the closing** `` **tag**, so they load after the page content. # Use Dynamic Tokens for Personalized Landing Pages Source: https://docs.landerlab.io/features/landing-pages/settings/dynamic-tokens Use dynamic tokens to personalize landing pages with visitor data like location, device, and date to improve engagement and conversions. Dynamic tokens allow you to **personalize your landing pages based on visitor data**. By displaying information such as the visitor’s city, country, browser, or device, your landing page can feel more relevant and engaging. For example, showing the visitor’s location can make the content appear **more tailored to them**, which often improves engagement and conversion rates. Thanks to LanderLab’s **built-in tracking capabilities**, you can display this information without relying on third-party tools or services. ### Preview in Editor Dsadasdsad ### Preview Live Dasdsadsadsa *** ## Visitor Data Tokens | Dynamic Token | Description | Example Output | | :-------------------- | :--------------------------------------------------- | :------------- | | `[[country]]` | Displays the country where the visitor is located. | Germany | | `[[city]]` | Displays the city where the visitor is located. | Rome | | `[[region]]` | Displays the region or state of the visitor. | Texas | | `[[browser]]` | Displays the visitor’s browser. | Chrome | | `[[operatingSystem]]` | Displays the visitor’s operating system. | MacOS | | `[[device]]` | Displays the type of device being used. | Desktop | | `[[countryCode]]` | Displays the two-letter country code of the visitor. | DE | | `[[regionCode]]` | Displays the region or state code of the visitor. | TX | | `[[postalCode]]` | Displays the postal or ZIP code of the visitor. | 10115 | ## Available Date Tokens | Token | Description | Example Output | | :---------------- | :------------------------------------------------------------------------ | :------------- | | `[[currentDate]]` | Displays the full current date in `dd/mm/yyyy` format. Supports shifting. | 12/03/2026 | | `[[date]]` | Displays the numeric day of the month. Supports shifting. | 24 | | `[[day]]` | Displays the current day of the week. Supports shifting. | Monday | | `[[dayName]]` | Displays the full day name. Supports shifting. | Tuesday | | `[[month]]` | Displays the numeric month. | 04 | | `[[monthName]]` | Displays the full month name. | January | | `[[year]]` | Displays the current year. | 2024 | ## How to Add Dynamic Tokens to a Landing Page Adding dynamic tokens to your landing page is very simple. ### 1. Open the landing page editor Go to **Landing Pages** and open the page you want to edit. ### 2. Insert the token Add the dynamic token directly into any **text element** where you want the information to appear. Example: ```text theme={null} Welcome visitors from [[city]]! ``` ### 3. Save and publish Save your changes and **publish or republish** the landing page. When visitors open the page, the token will automatically be replaced with **their actual information**. *** 💡 **Example Use Cases** Dynamic tokens can be used to create more personalized messages, such as: * “Special offer for visitors in **\[\[country]]**!” * “Top services available in **\[\[city]]** today” * “Optimized for **\[\[device]]** users” This type of personalization helps make your landing pages **feel more relevant and targeted to each visitor**. *** ## Using Dynamic Tokens for Localization Dynamic tokens can also be used for **automatic localization** of your landing pages. This means the content can adapt based on the visitor’s location, device, or environment. For example, you can display different text depending on where the visitor is located. ### Example: Location Personalization ```text theme={null} Special offer for visitors from [[country]]! ``` If a user visits from Germany, the page will display: ```text theme={null} Special offer for visitors from Germany! ``` ### Example: City Personalization ```text theme={null} Top services available today in [[city]] ``` If a user visits from London, the page will display: ```text theme={null} Top services available today in London ``` ### Example: Region Personalization ```text theme={null} Best deals available in [[region]] ``` This makes the landing page feel **more relevant and personalized**, which can increase engagement and conversions. *** ## Where to Use Localization Tokens Dynamic tokens can be added anywhere inside your landing page content, including: * Headlines * Text blocks * Buttons * Offers or promotions * Advertorial content * CTA messages Simply insert the token inside the **text element in the visual editor**, then save and publish the page. # Landing Page General Settings Source: https://docs.landerlab.io/features/landing-pages/settings/general Configure landing page settings like title, language, and favicon to improve user experience and optimize how pages appear in browsers. The **General Page Settings** allow you to configure important metadata and visual elements for your landing page. These settings help control how your page appears in the browser and how it is interpreted by browsers and search engines. In this section, you can configure the following: | Setting | Description | | :---------------- | :------------------------------------------------------------------------------------------------------ | | **Page Title** | The title displayed in the browser tab. It helps users identify your page when multiple tabs are open. | | **Page Language** | Language metadata that tells browsers and search engines what language your landing page is written in. | | **Favicon** | A small icon representing your page or brand that appears in browser tabs. | ## Set the Landing Page Title Follow these steps to update the title of your landing page. ### 1. Go to Landing Pages From the **Landing Pages** section of your dashboard, locate the landing page you want to edit. ### 2. Open the landing page Click on the **name of the landing page**. ### 3. Open the Settings panel Click the **Settings** gear to access the landing page settings. ### 4. Enter the page title In the **Page Title** field under **General**, enter your desired title. ### 5. Save your changes Click **Save Changes** to apply the update. The Page Title field in the General section of LanderLab landing page settings ## Set the Landing Page Language The page language helps browsers and search engines understand the **primary language of your landing page**. **Before you begin:**
The language field uses **ISO 639-1 language codes** (for example: `en` for English, `es` for Spanish).
### Steps 1. Go to **Landing Pages** 2. Click the **name of the landing page** 3. Open **Settings** 4. Enter the **language code** in the **Language** field under **General Page Settings** 5. Click **Save Changes** The Language field in LanderLab landing page settings, holding an ISO 639-1 language code ## Set the Landing Page Favicon A **favicon** is the small icon displayed next to your page title in browser tabs. It helps users quickly recognize your page. ⚠️ **Before you begin:** For best results, your favicon should: * Use a **square aspect ratio (1:1)** * Be **32×32 or 64×64 pixels** * Use **PNG or ICO file format** **Before you begin:** For best results, your favicon should: * Use a **square aspect ratio (1:1)** * Be **32×32 pixels** * Use **PNG** ### Steps 1. Go to **Landing Pages** 2. Click the **name of the landing page** 3. Open **Settings** 4. Click **Upload** and select the favicon from your computer 5. Click **Save Changes** Your favicon will now appear in the **browser tab when the page is published**. The favicon upload control in LanderLab landing page settings # SEO Settings for Landing Pages Source: https://docs.landerlab.io/features/landing-pages/settings/seo Optimize landing pages for search engines with meta descriptions and keywords to improve visibility and attract more organic traffic. Search Engine Optimization (**SEO**) helps improve your landing page’s **visibility in search engines** and increases the chances of attracting organic traffic. LanderLab allows you to configure key SEO metadata that helps search engines understand your page and display it correctly in search results. Under the **SEO settings**, you can configure the following: | Setting | Description | | :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A short summary of your landing page content. This often appears in search engine results and when the page is shared on social platforms. | | **Keywords** | A list of relevant words or phrases that describe the main topics of your page. These help search engines understand the page’s content. | ## Add a Description to a Landing Page Follow these steps to add a description to your landing page metadata. ### 1. Go to Landing Pages From your dashboard, navigate to the **Landing Pages** section. ### 2. Open the landing page Locate the landing page you want to edit and click its **name**. ### 3. Open the Settings panel Click the **Settings** gear to access the landing page settings. ### 4. Open SEO settings Click the **SEO** tab in the settings menu. ### 5. Add your description Enter your page description in the **Description** text box. ### 6. Save your changes Click **Save Changes** to apply the update Desciption ## Add Keywords to a Landing Page Follow the steps below to add keywords to your landing page metadata. ### 1. Go to Landing Pages Navigate to the **Landing Pages** section. ### 2. Open the landing page Click the **name of the landing page** you want to edit. ### 3. Open Settings Click the **Settings** gear. ### 4. Open the SEO tab Select the **SEO** settings section. ### 5. Add keywords Enter your keywords in the **Keywords** field, separating each keyword with a **comma**. Example: ```text theme={null} landing page builder, lead generation, quiz funnel, performance marketing ``` ### 6. Save changes Click **Save Changes** to apply the update. Keyword **Tip:** Use **clear and relevant keywords and descriptions** that match your landing page content to improve how your page appears in search results. # AI Lead Insights in LanderLab Source: https://docs.landerlab.io/features/leads/ai-lead-insights Learn how to use AI Lead Insights in LanderLab to analyze landing page leads, identify patterns, detect issues, and get actionable recommendations to improve performance. AI Lead Insights helps you quickly understand how your landing page is performing by analyzing your lead data and providing actionable recommendations. Instead of manually reviewing spreadsheets, the AI gives you a clear breakdown of what’s happening and how to improve it. ## How to Access AI Lead Insights Insights 1. Go to your **Landing Pages** 2. Open the specific landing page you want to analyze 3. Click on the **Leads** tab 4. Click **Insights** (top right above the table) The system will automatically analyze your lead data *** ## What You’ll See ### Data Overview Visual breakdowns of your lead data, including: * Total responses * Field-level distributions (e.g., answers, selections) * General performance overview ## AI Insights ### Anomalies * Detect unusual activity or duplicate entries * Spot irregular patterns in submissions ### Segments * Understand how different groups behave * See breakdowns by country, answers, or inputs ### Data Quality * Identify missing or inconsistent data * Get suggestions to improve form quality ## Quick Performance Breakdown The AI summarizes: * How your leads are coming in * Patterns in responses * Areas that may need optimization *** ## Why It Matters * Saves time on manual analysis * Helps you improve conversion quality * Gives clear next steps to optimize your funnel # Use Lead Compliance Delivery for Data Privacy Source: https://docs.landerlab.io/features/leads/bypass-saving Enable lead compliance delivery to send data directly to your CRM without storing it, ensuring privacy and regulatory compliance. The **Lead Compliance Delivery** feature allows you to send leads **directly to your CRM, webhook, or integration without storing them on LanderLab servers**. This option is useful for organizations that require **strict compliance, data privacy control, or direct lead routing**. When enabled, LanderLab will **bypass storing the lead data locally** and deliver the information immediately to your configured integration. ## Why Use Lead Compliance Delivery Enabling this feature can help you: * Meet **data compliance requirements** such as GDPR or CCPA * Maintain **full control over your lead data storage** * Deliver leads **directly to your CRM or automation tools** * Avoid storing sensitive information on third-party platforms *** ## How to Enable Lead Compliance Delivery Leadcompliance Follow these steps to activate the feature for your landing page. ### 1. Open your landing page From the **LanderLab dashboard**, go to **Landing Pages** and click the landing page you want to configure. ### 2. Open Settings Click the **Settings** button to open the landing page settings window. ### 3. Go to the Leads section In the settings panel, select **Leads** from the left-side menu. ### 4. Enable Lead Compliance Delivery Scroll to the **Lead Compliance Delivery** section. Toggle **Lead Compliance Delivery** to **ON**. ### 5. Save your settings Click **Save Settings** to apply the change. Once enabled, leads will be **delivered directly to your configured integrations** instead of being stored on LanderLab. *** ## Important Notes ### How it works * Leads are **sent directly to your configured CRM, webhook, or integration** * LanderLab **does not store the lead data** ### Compliance benefits This feature helps ensure that your lead flow aligns with **data privacy regulations and internal compliance policies**. **Important Warning** Before enabling Lead Compliance Delivery: * Make sure your **CRM, webhook, or integration is properly configured** * Test your lead flow to confirm that leads are received correctly Leads **cannot be recovered** if the integration fails, because they were **never stored on LanderLab servers**. # Manage and Export Landing Page Leads Source: https://docs.landerlab.io/features/leads/managing Manage leads by viewing, filtering, exporting, and deleting data to track performance and optimize your campaigns Managing leads effectively is essential for **nurturing potential customers and improving conversions**. LanderLab allows you to view, filter, export, and manage leads collected through your landing pages. In this guide, you’ll learn how to **access, export, and delete lead data** from your landing pages. *** ## View Landing Page Leads Follow the steps below to view leads collected from a specific landing page. Leads ### 1. Go to Landing Pages Open the **Landing Pages** section from your dashboard. ### 2. Select the landing page Locate the landing page that collects leads and click its **name**. ### 3. Open the Leads tab Click the **Leads** tab. You will now see a table containing all leads collected from that landing page. ### Filter leads Inside the leads reporting page, you can filter results by: * **Lead opt-in date** * **Landing page variant** This helps you analyze leads from **specific time periods or A/B test variants**. *** ## Export Landing Page Leads You can export your leads for use in **CRM systems, email marketing platforms, or further analysis**. Csv ### Steps 1. Go to **Landing Pages** 2. Click the **name of the landing page** collecting leads 3. Open the **Leads** tab 4. Select the **variant** (optional) 5. Choose a **date range** 6. Click **Export** A **CSV file** containing your lead data will automatically download. *** ## Delete a Lead If needed, you can remove individual leads from your records. Deletelead ### Steps 1. Go to **Landing Pages** 2. Click the **name of the landing page** 3. Open the **Leads** tab 4. Select the **lead(s)** you want to remove 5. Click the **Delete** button in the top-right corner of the leads table 6. Confirm the deletion **Important:**\ Deleting a lead is **permanent and cannot be undone**. The selected lead(s) will be permanently removed from your lead list. # Understand Partial Leads and Drop-Offs Source: https://docs.landerlab.io/features/leads/partial-leads Understand partial leads to track drop-offs, analyze user behavior, and optimize multi-step funnels for better conversions. A **Partial Lead** is recorded when a visitor begins a **multi-step submission flow**-such as a Quiz or Multi-Step Form-but leaves before completing the entire process. Partial leads provide valuable insights into **where users drop off in your funnel**, allowing you to analyze user behavior and improve conversion rates. *** ## What Is a Partial Lead? A partial lead occurs when a user: * Starts a **multi-step form or quiz** * Submits some information in the early steps * Leaves the page before reaching the **final submission or Thank You page** Even though the user did not fully complete the flow, LanderLab saves the information that was submitted up to that point. *** ## Identifying a Partial Lead Partial leads can easily be identified in the **Leads dashboard**. | Field | Description | | :---------------- | :-------------------------------------------------------------------- | | **Lead Status** | Partial submissions are marked with the status **“Partial”**. | | **Captured Data** | Only the information entered before the user left the flow is stored. | Partialead *** ## When Partial Leads Are Recorded Partial leads are only created in **multi-step flows**, such as: * **Quizzes** * **Multi-step lead forms** * **Funnels where contact details appear in later steps** Single-step forms usually **do not produce partial leads**, because the form must be submitted in one step. *** ## Example Flow Below is a typical scenario where a partial lead is recorded: 1. A visitor enters their **ZIP Code** on the first step. 2. The visitor clicks **Next** and enters their **First and Last Name**. 3. The visitor proceeds to the next step requesting **Email and Phone Number**. 4. The visitor leaves the page without completing the final submission. Because the user submitted some information but **did not finish the flow**, LanderLab records this as a **Partial Lead**. *** ## Why Partial Leads Are Valuable Partial leads help you: * Identify **drop-off points in your funnel** * Understand **user behavior** * Improve **form design and conversion rates** * Recover potential leads using the data already collected Analyzing partial leads can help you **optimize your funnels and reduce abandonment rates**. **Tip:** If you notice a high number of partial leads at a specific step, consider simplifying the form or reducing the number of required fields at that stage. # How to Distribute and Monitor AI Credits to Team Members in LanderLab Source: https://docs.landerlab.io/features/multi-user/credit-limits Learn how to set monthly AI credit limits for team members and monitor credit usage across your organization in LanderLab. Control spending and optimize AI tool access for your entire team. ## Set Credit Limits 1. Go to **Settings** → **Users** 2. Click the **three dots (•••)** next to a user's name 3. Select **Set AI Credit Limit** 4. Enter the monthly limit or leave blank for unlimited 5. Click **Save** Credits reset on the 1st of each month. The Set AI Credit Limit dialog in LanderLab, with a field for a user's monthly credit allowance ## Monitor Usage Check the **AI CREDITS USAGE** column in the Users list to see: * Credits consumed per user * Monthly allocation (e.g., "6.93 / 100" or "Unlimited") ## Key Points * **Leave blank = unlimited access** to your organization's allocation * Credits are consumed by AI-powered features (page generation, text/image generation, background removal) * Monthly reset is automatic on the 1st of each month * Adjust limits anytime through the same menu ## Troubleshooting **User can't access AI features?** * Check their credit usage in the Users list * Wait for monthly reset if limit is reached # System Activity Logs Source: https://docs.landerlab.io/features/multi-user/system-logs Track every change made across your organization with the audit log. Filter by user, category, or date range and drill into full event details. ## Where to Find Logs Go to **Settings** and click **Logs** in the left sidebar. The page displays all events across your organization in reverse chronological order. Group 2147226218 ## Reading the Log Table Each row in the log table represents a single event and shows four columns: | Column | Description | | :-------- | :-------------------------------------------------------------------------------------------------- | | **Event** | The type of action that was performed (for example, "Lander created" or "Variant settings updated") | | **Item** | The specific lander, integration, domain, or other item that was affected | | **User** | The team member who performed the action | | **Time** | How long ago the event occurred | A colored bar on the left edge of each row provides a quick visual indicator for the event type. ## Filtering Logs You can narrow the log view using the controls at the top of the page: * **Date range**: Choose from **1D**, **7D**, **1M**, **3M**, **All**, or **Custom** to limit results to a specific time window. * **User**: Filter by a specific team member to see only their activity. * **Category**: Filter by event category to focus on a particular type of action. * **Search**: Use the search bar to find events by keyword. ## Viewing Event Details Click any row to open the event detail panel. This panel shows a full breakdown of the event: Integration Details | Field | Description | | :------------ | :-------------------------------------------------------------- | | **Item** | The name and ID of the affected item | | **Variant** | The variant involved, if applicable | | **Workspace** | The workspace where the change was made | | **Time** | The exact date, time, and timezone of the event | | **Changes** | A summary of what was modified | | **User** | The name and email address of the person who made the change | | **IP** | The IP address of the request | | **Device** | The browser and operating system used at the time of the action | ## Common Event Types Below are examples of events you may see in your log: * Lander created * Lander renamed * Variant settings updated * Domain settings updated * Lander integration added * Lander integration updated * Integration created Logs are read-only. No entries can be edited or deleted. This ensures a reliable audit trail for your organization. # Add Users and Manage Roles Source: https://docs.landerlab.io/features/multi-user/users Add users to your organization, assign roles, and manage workspace access to collaborate and control permissions efficiently. You can invite team members to your **organization** by adding them as users. Each user can be assigned a role and access to specific workspaces depending on their responsibilities. User ## How to Add a User Follow the steps below to invite a new user. ### 1. Open Settings Go to **Settings** from your dashboard. ### 2. Navigate to the Users section Click the **Users** tab. You will see a table listing all current users in your organization. ### 3. Click Add User Click the **Add User** button. A pop-up window will appear where you can configure the user’s access. ### 4. Enter user details Fill in the required fields: | Field | Description | | :------------- | :------------------------------------------------------- | | **Email** | Enter the email address of the person you want to invite | | **Role** | Choose a role (Admin, Worker, or Viewer) | | **Workspaces** | Assign the user to specific workspaces if needed | ### 5. Send the invitation Confirm the details and send the invitation. The user will receive an **email invitation** to join your organization. *** ## User Roles Explained | Role | Permissions | | :--------- | :---------------------------------------------------------------------------------- | | **Admin** | Full access to the organization, including managing users, workspaces, and settings | | **Worker** | Can create and manage landing pages but has limited administrative permissions | | **Viewer** | Read-only access to landing pages and reports | ## Workspace Access * **Admins** automatically have access to **all workspaces**. * **Workers and Viewers** can be assigned to **specific workspaces**. If no workspace is selected for Workers or Viewers, they will **automatically receive access to all workspaces**. # Create and Manage Workspaces Source: https://docs.landerlab.io/features/multi-user/workspaces Create and manage workspaces to organize campaigns, teams, and landing pages with better structure and access control. Workspaces help you **organize projects, campaigns, and teams** inside your LanderLab organization. Each workspace can have its own landing pages, domains, users, and integrations. You can create a new workspace either from the **sidebar workspace selector** or from the **Settings → Workspaces section**. Workspace ## Create a Workspace from the Sidebar ### Steps 1. From your **LanderLab dashboard**, locate the **workspace selector** in the top-left sidebar. 2. Click the **workspace dropdown** to open the list of available workspaces. 3. Scroll to the bottom of the list. 4. Click **+ Add Workspace**. 5. Enter a **name for the new workspace**. 6. Confirm the creation. After the workspace is created, it will appear in the **workspace list**, and you can switch to it anytime using the sidebar selector. *** ## Create a Workspace from Settings ### Steps 1. Go to **Settings**. 2. Click the **Workspaces** tab. 3. You will see a table listing your existing workspaces. 4. Click **Add Workspace**. 5. Enter a **name for the new workspace**. 6. Confirm the creation. The new workspace will appear in the workspace list. *** ## What Happens After Creating a Workspace Once the workspace is created: * It becomes available in the **workspace selector in the sidebar** * You can create **landing pages, domains, and campaigns** inside that workspace * Users can be assigned specific **roles and permissions** per workspace ## Permissions Only **Organization Admins** can create new workspaces. Users with the following roles **cannot create workspaces**: * **Workers** * **Viewers** If you do not see the **Add Workspace** option, contact your **organization administrator**. **Tip:** Many teams create separate workspaces for different purposes, such as: ```text theme={null} Lead Gen Campaigns Affiliate Offers Client Projects Testing / Experiments ``` # Use Quiz Events API for Tracking and Automation Source: https://docs.landerlab.io/features/quizzes/api/events Use Quiz Events API to track user actions, monitor quiz lifecycle events, and trigger custom logic for advanced funnel optimization. The LanderLab Quiz Events API publishes the lifecycle of your quiz so you can interact with it using custom JavaScript. This is particularly useful if you want to implement your own granular tracking or if you want to interact with your quiz data client-side. ## Introduction The Events API allows you to listen to different lifecycle events of your quiz and execute custom code when these events occur. Here’s a basic example: ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { console.log('ll-quiz init:', event.detail.quizId); const llQuizApi = event.detail.llQuizApi; // Use llQuizApi here }); ``` where **ll-quiz-init** is the Event Name of the lifecycle event. ## Events Overview Your quiz emits the following events per lifecycle event: | Event Name | Lifecycle Event | Data Passed | | :------------------- | :----------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | | ll-quiz-init | When the quiz loads initially and is bound to the DOM | quizId, llQuizApi | | ll-quiz-submit | When the quiz gets submitted | quizId, stepId, stepName, fields, fieldsSimple, llQuizApi, response | | ll-quiz-step-view | When a step is visited | quizId, stepId, stepName, fields, fieldsSimple, llQuizApi | | ll-quiz-step-leave | When navigating away from a step | quizId, stepName, llQuizApi | | ll-quiz-exit | When the tab/window in which the quiz lives gets closed | quizId, llQuizApi | | ll-quiz-button-click | When a button block is clicked (DefaultButton, Continue, Previous) | quizId, blockId, blockName, stepId, stepName, llQuizApi | | ll-quiz-input-click | When a Multiple Choice or Image Choice option is clicked | quizId, blockId, blockName, stepId, stepName, optionId, optionValue, optionLabel, llQuizApi | | ll-quiz-value-change | When the value of a block changes (typed fields when the visitor leaves the field, other inputs immediately) | quizId, blockId, blockName, blockType, stepId, stepName, value, previousValue, source, llQuizApi | ## ll-quiz-init Event **When:** When the quiz loads initially and is bound to the DOM. **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const { quizId, llQuizApi } = event.detail; console.log('Quiz initialized:', quizId); // Access the LlQuiz API const currentStepId = llQuizApi.getCurrentStepID(); const allBlocks = llQuizApi.getBlocks(); }); ``` ## ll-quiz-submit Event **When:** When the quiz gets submitted (typically when the submit button is clicked and the form is successfully submitted). **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **stepId** (string): The step ID where submission occurred * **stepName** (string): The step name where submission occurred * **fields** (Field\[]): Array of field objects with detailed information (see Fields Structure below) * **fieldsSimple** (FieldsSimple): Key-value object with label as key and value as string (see FieldsSimple Structure below) * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz * **response** (any): The API response from the submission endpoint. Can be: * The parsed JSON response if the API returns JSON * The Response object if it’s not JSON * null if the API call failed **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-submit', (event) => { const { quizId, stepId, stepName, fields, fieldsSimple, llQuizApi, response } = event.detail; console.log('Quiz submitted:', quizId); console.log('Submitted from step:', stepName); console.log('Submitted data:', fieldsSimple); console.log('API Response:', response); // Send to your analytics platform if (window.gtag) { window.gtag('event', 'quiz_submit', { 'quiz_id': quizId, 'step_id': stepId, 'step_name': stepName }); } }); ``` ## ll-quiz-step-view Event **When:** When a step is visited (whenever the user navigates to a new step). **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **stepId** (string): The step ID that was viewed * **stepName** (string): The step name that was viewed * **fields** (Field\[]): Array of field objects from the current step (see Fields Structure below) * **fieldsSimple** (FieldsSimple): Key-value object with label as key and value as string for the current step (see FieldsSimple Structure below) * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-step-view', (event) => { const { quizId, stepId, stepName, fields, fieldsSimple, llQuizApi } = event.detail; console.log('Quiz:', quizId); console.log('Step viewed:', stepName); console.log('Current step data:', fieldsSimple); // Track step view if (window.dataLayer) { window.dataLayer.push({ 'event': 'll_quiz_step_view', 'quiz_id': quizId, 'step_id': stepId, 'step_name': stepName }); } }); ``` ## ll-quiz-step-leave Event **When:** When navigating away from a step (before the next step is shown). **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **stepName** (string): The step name being left * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-step-leave', (event) => { const { quizId, stepName, llQuizApi } = event.detail; console.log('Quiz:', quizId); console.log('Leaving step:', stepName); // Get current step information before leaving const currentStepId = llQuizApi.getCurrentStepID(); console.log('Current step ID:', currentStepId); }); ``` ## ll-quiz-exit Event **When:** When the tab/window in which the quiz lives gets closed. This event is based on the native pagehide event, which, unfortunately, is not entirely reliable. The event may not fire in all scenarios (e.g., force quit, browser crash, or certain mobile browser behaviors). Don’t rely on it for critical operations. **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-exit', (event) => { const { quizId, llQuizApi } = event.detail; console.log('Quiz exited:', quizId); // Track exit event (e.g., for analytics) if (window.gtag) { window.gtag('event', 'quiz_exit', { 'quiz_id': quizId }); } // Note: This event may not fire reliably in all scenarios // Don't rely on it for critical operations }); ``` ## ll-quiz-button-click Event **When:** When a button block is clicked. This includes DefaultButton, Continue, Previous, and Submit button blocks. **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **blockId** (string): The unique identifier of the button block that was clicked * **blockName** (string): The name property of the button block * **stepId** (string): The step ID where the button is located * **stepName** (string): The step name where the button is located * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-button-click', (event) => { const { quizId, blockId, blockName, stepId, stepName, llQuizApi } = event.detail; console.log('Button clicked:', blockName); console.log('In step:', stepName); // Track button clicks for analytics if (window.gtag) { window.gtag('event', 'button_click', { 'quiz_id': quizId, 'block_id': blockId, 'block_name': blockName, 'step_id': stepId, 'step_name': stepName }); } // Perform custom logic based on button type if (blockName === 'submit-button') { console.log('Submit button was clicked!'); } }); ``` ## ll-quiz-input-click Event **When:** When a Multiple Choice option or Image Choice option is clicked. **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **blockId** (string): The unique identifier of the block where the option was clicked * **blockName** (string): The name property of the block * **stepId** (string): The step ID where the block is located * **stepName** (string): The step name where the block is located * **optionId** (string): The unique identifier of the clicked option * **optionValue** (string): The value of the clicked option * **optionLabel** (string): The label of the clicked option * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-input-click', (event) => { const { quizId, blockId, blockName, stepId, stepName, optionId, optionValue, optionLabel, llQuizApi } = event.detail; console.log('Option clicked:', optionLabel); console.log('In block:', blockName); console.log('In step:', stepName); // Track option clicks for analytics if (window.gtag) { window.gtag('event', 'option_click', { 'quiz_id': quizId, 'block_id': blockId, 'block_name': blockName, 'step_id': stepId, 'step_name': stepName, 'option_id': optionId, 'option_value': optionValue, 'option_label': optionLabel }); } // Perform custom logic based on option selection if (optionValue === 'premium-plan') { console.log('Premium plan selected!'); } }); ``` ## ll-quiz-value-change Event **When:** When the value of a block changes. Each event reports one answer, with the value before and after the change: * **Typed fields** (Text, Textarea, Number, Email, Phone Number, Zip Code, Birth Date, Google Address) emit the event when the visitor leaves the field (blur, Tab, Enter) or leaves the step. Keystrokes do not emit events. * **All other inputs** (Multiple Choice, Image Choice, Select, Checkbox, Range Slider, Date Picker, Upload, Signature, and so on) emit the event immediately. For a Multiple Choice or Image Choice option, **ll-quiz-input-click** fires first (the click), then **ll-quiz-value-change** (the resulting value). * Values set through the LlQuiz API (**block.setValue()**, **block.reset()**) emit the event immediately. * Values present when the quiz loads (defaults, URL parameters, restored answers) are the starting point, not changes, so they do not emit the event. They are available in **fields** on **ll-quiz-step-view**. * Nothing is emitted when the new value equals the last reported one. **Event Detail:** * **quizId** (string): The unique identifier of the quiz * **blockId** (string): The unique identifier of the block * **blockName** (string): The name property of the block (the variable name) * **blockType** (string): The block type, e.g. `text-field`, `multiple-choice`, `checkbox-field` * **stepId** (string): The step ID where the block is located * **stepName** (string): The step name where the block is located * **value** (string): The new value, in the same format as **Field.value** (multiple selections joined by the block’s separator, a checkbox as `checked` or `unchecked`) * **previousValue** (string): The value reported by the previous **ll-quiz-value-change** of this block, or the value the block had when the quiz loaded * **source** (string): Who changed the value: * `user`: the visitor * `api`: your own script, through the LlQuiz API * `system`: the quiz itself (reset on back navigation, clearing the answers after submit) * **llQuizApi** (LlQuizApi): The LlQuiz API instance for interacting with the quiz **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-value-change', (event) => { const { quizId, blockName, blockType, stepName, value, previousValue, source, llQuizApi } = event.detail; // Ignore changes made by scripts or by the quiz itself if (source !== 'user') return; console.log(`${blockName} (${blockType}) on step ${stepName}: "${previousValue}" -> "${value}"`); // Track answers for analytics if (window.dataLayer) { window.dataLayer.push({ 'event': 'll_quiz_answer', 'quiz_id': quizId, 'block_name': blockName, 'block_type': blockType, 'step_name': stepName, 'value': value }); } // Perform custom logic based on the new value if (blockName === 'plan' && value === 'premium') { llQuizApi.getBlockByName('promo-code').visibility.show(); } }); ``` ## Understanding fields and fieldsSimple **fields** and **fieldsSimple** contain all information from your quiz in different structures. **Quick Overview:** * **fieldsSimple**: A key-value object where keys are field labels and values are user inputs as strings * **fields**: An array of detailed field objects with complete metadata (id, label, value, key, stepId, stepName) **Quick Example:** ```json theme={null} fieldsSimple: { "Choose your housing type": "Apartment", "Email": "email@example.com", "Consent": "true", }, fields: [ { id: "text-field-123", label: "Please enter your name", value: "John Doe", key: "text-field-123", stepId: "step-1", stepName: "start" } ] ``` ## Using LlQuiz API in Events All events provide access to the **llQuizApi** instance, which allows you to interact with your quiz programmatically. **Available Methods:** * **llQuizApi.getCurrentStepID()** – Returns the current step ID (e.g., “step-1”) * **llQuizApi.getCurrentStepName()** – Returns the current step name (e.g., “start”) * **llQuizApi.getBlocks()** – Returns all blocks in the quiz * **llQuizApi.getBlockByID(blockId)** – Returns a specific block by its ID * **llQuizApi.getBlockByName(blockName)** – Returns a block by its name property (first match) * **llQuizApi.getBlocksByStepID(stepId)** – Returns all blocks in a specific step * **llQuizApi.getBlocksByStepName(stepName)** – Returns all blocks in a specific step **Block Methods:** Most blocks support: * **block.getValue()** – Get the current value of the block * **block.setValue(value)** – Set the value of the block * **block.reset()** – Reset the block to its initial state **Example:** ```javascript theme={null} window.addEventListener('ll-quiz-step-view', (event) => { const { llQuizApi } = event.detail; // Get all blocks in current step const currentStepId = llQuizApi.getCurrentStepID(); const stepBlocks = llQuizApi.getBlocksByStepID(currentStepId); // Interact with blocks stepBlocks.forEach(block => { if (block.blockType === 'text-field') { const value = block.getValue(); console.log(`${block.blockID}: ${value}`); } }); }); ``` ## Complete Example Here’s a complete example showing how to use all quiz events together: ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const { quizId, llQuizApi } = event.detail; console.log('Quiz initialized:', quizId); }); window.addEventListener('ll-quiz-step-view', (event) => { const { quizId, stepId, stepName, fieldsSimple, llQuizApi } = event.detail; console.log(`Quiz: ${quizId}`); console.log(`Viewing step: ${stepName} (${stepId})`); console.log('Step data:', fieldsSimple); }); window.addEventListener('ll-quiz-step-leave', (event) => { const { quizId, stepName } = event.detail; console.log(`Quiz: ${quizId}`); console.log(`Leaving step: ${stepName}`); }); window.addEventListener('ll-quiz-submit', (event) => { const { quizId, stepId, stepName, fields, fieldsSimple, response } = event.detail; console.log(`Quiz: ${quizId}`); console.log(`Quiz submitted from step: ${stepName} (${stepId})`); console.log('All quiz data:', fieldsSimple); console.log('API response:', response); // Example: Send to analytics if (window.gtag) { window.gtag('event', 'conversion', { 'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL', 'value': 1.0, 'currency': 'USD' }); } }); window.addEventListener('ll-quiz-exit', (event) => { const { quizId, llQuizApi } = event.detail; console.log(`Quiz: ${quizId}`); console.log('Quiz exited (tab/window closed)'); // Example: Track exit event if (window.gtag) { window.gtag('event', 'quiz_exit', { 'quiz_id': quizId }); } // Note: This event is based on pagehide and may not fire reliably // Don't rely on it for critical operations }); window.addEventListener('ll-quiz-button-click', (event) => { const { quizId, blockId, blockName, stepId, stepName, llQuizApi } = event.detail; console.log(`Quiz: ${quizId}`); console.log(`Button clicked: ${blockName} (${blockId})`); console.log(`In step: ${stepName} (${stepId})`); // Example: Track button clicks if (window.gtag) { window.gtag('event', 'button_click', { 'quiz_id': quizId, 'block_id': blockId, 'block_name': blockName, 'step_id': stepId, 'step_name': stepName }); } }); window.addEventListener('ll-quiz-input-click', (event) => { const { quizId, blockId, blockName, stepId, stepName, optionId, optionValue, optionLabel, llQuizApi } = event.detail; console.log(`Quiz: ${quizId}`); console.log(`Option clicked: ${optionLabel} (${optionId})`); console.log(`In block: ${blockName} (${blockId})`); console.log(`In step: ${stepName} (${stepId})`); // Example: Track option clicks if (window.gtag) { window.gtag('event', 'option_click', { 'quiz_id': quizId, 'block_id': blockId, 'block_name': blockName, 'step_id': stepId, 'step_name': stepName, 'option_id': optionId, 'option_value': optionValue, 'option_label': optionLabel }); } }); window.addEventListener('ll-quiz-value-change', (event) => { const { quizId, blockName, blockType, stepName, value, previousValue, source } = event.detail; if (source !== 'user') return; // only the visitor's own answers console.log(`Quiz: ${quizId}`); console.log(`Answer changed: ${blockName} (${blockType}) on ${stepName}: "${previousValue}" -> "${value}"`); // Example: Track answers if (window.dataLayer) { window.dataLayer.push({ 'event': 'll_quiz_answer', 'quiz_id': quizId, 'block_name': blockName, 'step_name': stepName, 'value': value }); } }); ``` # Use Quiz API for Advanced Customization Source: https://docs.landerlab.io/features/quizzes/api/reference Use the Quiz API to control quiz behavior, manage data, and create dynamic, interactive funnel experiences with custom logic. The LanderLab Quiz API provides a powerful way to extend and customize your quizzes at runtime using JavaScript. This API gives you controlled access to quiz data, blocks, and events, making it easy to create dynamic and interactive quiz experiences. ## Understanding the Quiz API When a quiz loads, many processes happen behind the scenes—blocks are initialized and rendered, events are registered and dispatched, and integrations run. The LanderLab Quiz API hooks into these processes and provides functions to read, write, or execute data in a way the system expects. The Quiz API is part of the LanderLab Event system and is accessible through the detail property of event objects. ## Accessing the Quiz API You can access the Quiz API in any LanderLab Quiz event using the following pattern: ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Use llQuizApi here }); ``` ## Available Quiz Events The LanderLab Quiz API can be accessed in the following events: * **ll-quiz-init** – Fires when the quiz loads initially and is bound to the DOM. * **ll-quiz-submit** – Fires when the quiz gets submitted. * **ll-quiz-step-view** – Fires when a step is visited. * **ll-quiz-step-leave** – Fires when navigating away from a step. * **ll-quiz-exit** – Fires when the tab/window is closed (based on pagehide event, not entirely reliable). * **ll-quiz-button-click** – Fires when a button block is clicked (DefaultButton, Continue, Previous, Submit). * **ll-quiz-input-click** – Fires when a Multiple Choice option or Image Choice option is clicked. * **ll-quiz-google-address-select** – Fires when an address is selected from the Google Address autocomplete dropdown. * **ll-quiz-value-change** – Fires when a block value is committed: typed fields when the visitor leaves the field or the step, every other input immediately. Also fires for values set through the Quiz API. See the Quiz Events API page for the data each event carries. ## Getting Current Step Information Use these functions to receive information about the step the user is currently viewing. ```javascript theme={null} llQuizApi.getCurrentStepID(); // Returns "step-1" llQuizApi.getCurrentStepName(); // Returns "start" ``` ## Navigation You can navigate around your quiz programmatically by requesting navigation. Forward navigation (goNext, goToStep) validates the current step before proceeding and prevents navigation if the step is invalid. ```javascript theme={null} llQuizApi.navigation.goNext(); // Navigates to the next step (async, validates first) llQuizApi.navigation.goBack(); // Navigates to the previous step llQuizApi.navigation.goToStep("step-1"); // Navigates to the given step ID (async, validates first) llQuizApi.navigation.goToUrl("https://example.com"); // Navigates to the given URL llQuizApi.navigation.goToUrl("https://example.com", true); // Navigates to URL in a new tab ``` Forward navigation (goNext, goToStep) validates the current step before proceeding. If validation fails, navigation is prevented and a warning is logged to the console. These methods are async and return a Promise. ## Step Validation You can validate a step by calling these functions. Step validation is asynchronous, so keep that in mind. You get a boolean result which indicates the validity of the step. ```javascript theme={null} llQuizApi.validateStepByID("step-1").then(console.log); // { success: boolean } llQuizApi.validateStepByName("start").then(console.log); // { success: boolean } ``` If multiple steps have the same name, validateStepByName validates the first one found. ## Retrieving Blocks The Quiz API provides multiple functions to retrieve blocks from your quiz. You can get all blocks, a specific block by ID or name, or all blocks from a particular step. **Get all blocks in your quiz:** ```javascript theme={null} llQuizApi.getBlocks(); ``` **Get a specific block by its ID:** ```javascript theme={null} llQuizApi.getBlockByID("text-field-123"); ``` **Get a block by its name property:** ```javascript theme={null} llQuizApi.getBlockByName("firstName"); ``` **Get all blocks from a specific step by step ID:** ```javascript theme={null} llQuizApi.getBlocksByStepID("step-1"); ``` **Get all blocks from a specific step by step name:** ```javascript theme={null} llQuizApi.getBlocksByStepName("start"); ``` **Important Notes:** * getBlocks(), getBlocksByStepID() and getBlocksByStepName() only return blocks that hold a value (see Stateless Blocks below). * getBlockByID() and getBlockByName() additionally resolve buttons (Continue, Previous, Submit, DefaultButton), so you can call setLabel() on them. * When using getBlockByName(), if multiple blocks have the same name, the function returns the first match. * getBlockByID() and getBlockByName() never return undefined. When no block matches, or the block is stateless, you get a "null block" whose methods log a console warning and do nothing: getValue() returns an empty string and validate() resolves to `{ success: false }`. Chained calls never throw, so optional chaining is not required. ## Working with Block Properties Every block provides three useful properties for easier block handling: * **blockID** – The unique identifier of the block that you can use for methods like getBlockByID. * **blockType** – The type of the block (text-field, checkbox-field, etc.). * **variableName** – The optional variable name you assigned to your block (from the block.name property). ```javascript theme={null} const block = llQuizApi.getBlockByID("text-field-123"); block.blockID; // The unique identifier block.blockType; // The type of the block block.variableName; // The variable name you assigned ``` ## Getting and Setting Block Values Almost all blocks containing user data support getValue() and setValue() functions that allow you to manipulate the current state of a block easily. ```javascript theme={null} const block = llQuizApi.getBlockByID("text-field-123"); const value = block.getValue(); // Returns "hello" block.setValue(`${value} my-name`); block.getValue(); // Returns "hello my-name" ``` Some blocks use different formats other than simple strings to work with values. Check the documentation for specific block types to understand their value formats. Setting a value through the API emits an **ll-quiz-value-change** event with `source: 'api'`, so listeners can tell script changes apart from visitor input. ## Resetting Blocks You can reset any block to its initial state using the reset() function. This is similar to emptying a form field. Resetting also emits an **ll-quiz-value-change** event with `source: 'api'`. ```javascript theme={null} const block = llQuizApi.getBlockByID("text-field-123"); block.reset(); ``` ## Understanding Stateless Blocks Stateless blocks do not support getValue(), setValue(), reset(), or validate(). They are not returned by getBlocks(), getBlocksByStepID() or getBlocksByStepName(). **Stateless block types include:** Navigation buttons (PREVIOUS, CONTINUE, SUBMIT), text blocks (HEADLINE, PARAGRAPH), LOADER, ACCORDION, LINKS, DEFAULT\_BUTTON, DEFAULT\_IMAGE, VIDEO, CUSTOM\_CODE, LIST, LIST\_LOADER, PROGRESS, COUNTDOWN, DIVIDER, and TRACKING blocks. Buttons are the only stateless blocks you can retrieve, through getBlockByID() or getBlockByName(), because they support setLabel(). Calling a value method on a button throws an error: ```javascript theme={null} const button = llQuizApi.getBlockByID('continue-123'); button.setLabel('Next'); // Works button.getValue(); // Error: getValue() is not supported on stateless blocks (block type: continue) ``` Looking up any other stateless block returns a null block that warns instead of throwing: ```javascript theme={null} const headline = llQuizApi.getBlockByID('headline-123'); headline.getValue(); // Logs "Cannot get value: block does not exist" and returns "" ``` ## Block Validation You can validate a block by calling the validate() method. Block validation is asynchronous, so keep that in mind. Depending on the block type, this may trigger network validation (e.g., phone number, email, OTP). Hidden blocks always validate successfully. It’s important to understand that depending on the block, a validation could trigger a module usage like network validation in the phone block for example. This is also the reason the method is asynchronous. ```javascript theme={null} window.addEventListener('ll-quiz-init', async (event) => { const llQuizApi = event.detail.llQuizApi; // Get a block const block = llQuizApi.getBlockByID('text-field-123'); // Validate using async/await const result = await block.validate(); console.log(result); // { success: true } or { success: false } // Using .then() block.validate().then((result) => { if (result.success) { console.log('Block is valid!'); } else { console.log('Block has validation errors.'); } }); }); ``` ## Visibility Management Programmatically control the visibility of a block. Hidden blocks are excluded from validation and are not included in the submission payload. ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; const block = llQuizApi.getBlockByID('text-field-123'); // Show the block block.visibility.show(); // Hide the block block.visibility.hide(); // Get visibility state const state = block.visibility.get(); // true | false | undefined // Reset visibility state back to default block.visibility.clear(); }); ``` **Important Notes:** * Hidden blocks (**visibility.get() === false**) are: * Not validated (skipped in validation loops) * Not included in submission payload * Hidden in DOM (display: none) * Shown blocks (**visibility.get() === true** or **undefined**) are: * Validated normally * Included in payload * Visible in DOM * Visibility state: * **undefined** = default state (block is visible, no programmatic override) * **true** = explicitly shown (overrides any default) * **false** = explicitly hidden (block is not visible, not validated, not in payload) ## Additional Response Data You can use the additionalResponseData object to add, remove, or manipulate additional response data that will be sent when the user submits your quiz. A common use case is to add further hidden fields to the response, like UTM parameters and such. The data will be included in the lead submission payload with blockType ‘hidden-field’. All values must be strings. Convert numbers, booleans, or other types to strings before setting them. ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Set string values llQuizApi.additionalResponseData.set('my-value', 'hello'); llQuizApi.additionalResponseData.set('my-number', '42'); llQuizApi.additionalResponseData.set('my-boolean', 'true'); // Update existing value llQuizApi.additionalResponseData.set('my-value', 'hello-2'); // Get a value const value = llQuizApi.additionalResponseData.get('my-value'); // "hello-2" // Remove a value llQuizApi.additionalResponseData.remove('my-value'); // Get all additional response data const allData = llQuizApi.additionalResponseData.getAll(); // { "my-number": "42", "my-boolean": "true" } }); ``` ## Custom Methods For some blocks, we provide custom methods that might come in handy. ### setLabel You can programmatically manipulate the label of blocks that support labels. This works on: * Input fields: TextField, EmailField, PhoneNumberField, TextareaField, NumberField, DatePicker, BirthDateField, ZipCodeField, GoogleAddress, OtpField, SelectField, RangeSlider * Choice blocks: MultipleChoice, ImageChoice * Checkbox: CheckboxField * Buttons: Continue, Previous, Submit, DefaultButton CheckboxField supports HTML in labels, while all other blocks escape HTML for security (plain text only). Calling setLabel() on a block without a label throws an error. ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Set label for a text field (HTML will be escaped) const textBlock = llQuizApi.getBlockByID('text-field-123'); textBlock.setLabel('Enter your name'); // Set label for checkbox (HTML is allowed) const checkboxBlock = llQuizApi.getBlockByID('checkbox-123'); checkboxBlock.setLabel('I agree to the Terms and Conditions'); // Set label for multiple choice const choiceBlock = llQuizApi.getBlockByID('multiple-choice-123'); choiceBlock.setLabel('Select your preferred option'); // Set the text of a button const continueButton = llQuizApi.getBlockByID('continue-123'); continueButton.setLabel('Next Step'); }); ``` ### setPlaceholder You can programmatically manipulate the placeholder of blocks that render an input. This works on: * Input fields: TextField, EmailField, PhoneNumberField, TextareaField, NumberField, DatePicker, BirthDateField, ZipCodeField, GoogleAddress, OtpField Calling it on any other block does not throw: the value is stored on the block and nothing changes visually. ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Set placeholder for a text field const textBlock = llQuizApi.getBlockByID('text-field-123'); textBlock.setPlaceholder('Enter your name'); // Set placeholder for an email field const emailBlock = llQuizApi.getBlockByID('email-field-123'); emailBlock.setPlaceholder('example@email.com'); // Set placeholder for a textarea const textareaBlock = llQuizApi.getBlockByID('textarea-field-123'); textareaBlock.setPlaceholder('Enter your message here...'); }); ``` ## Practical Examples ### Setting Default Values on Quiz Load ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Get a block by ID and set a value const nameBlock = llQuizApi.getBlockByID('text-field-123'); nameBlock.setValue('John Doe'); // Get the value back console.log(nameBlock.getValue()); // 'John Doe' }); ``` ### Working with Multiple Blocks ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Get blocks by name const firstNameBlock = llQuizApi.getBlockByName('firstName'); firstNameBlock.setValue('John'); const emailBlock = llQuizApi.getBlockByName('email'); emailBlock.setValue('john@example.com'); // Get all blocks and set default values for text fields const allBlocks = llQuizApi.getBlocks(); allBlocks.forEach(block => { if (block.blockType === 'text-field') { block.setValue('Default value'); } }); }); ``` ### Programmatic Navigation Based on Conditions ```javascript theme={null} window.addEventListener('ll-quiz-init', async (event) => { const llQuizApi = event.detail.llQuizApi; // Example: Auto-advance after 5 seconds (validates before navigating) setTimeout(async () => { await llQuizApi.navigation.goNext(); }, 5000); // Example: Navigate to specific step based on block value const planValue = llQuizApi.getBlockByName('plan').getValue(); if (planValue === 'premium') { await llQuizApi.navigation.goToStep('premium-step'); } else if (planValue) { await llQuizApi.navigation.goToStep('standard-step'); } }); ``` ### Validating Steps ```javascript theme={null} window.addEventListener('ll-quiz-init', async (event) => { const llQuizApi = event.detail.llQuizApi; // Validate step by ID using async/await const resultById = await llQuizApi.validateStepByID('step-1'); console.log('Step validation result:', resultById); // { success: true } or { success: false } // Validate step by name using async/await const resultByName = await llQuizApi.validateStepByName('start'); console.log('Step validation result:', resultByName); // { success: true } or { success: false } // Validate step using .then() llQuizApi.validateStepByID('step-2').then((result) => { if (result.success) { console.log('Step is valid!'); } else { console.log('Step has validation errors.'); } }); // Example: Only navigate if step is valid const currentStepId = llQuizApi.getCurrentStepID(); const validationResult = await llQuizApi.validateStepByID(currentStepId); if (validationResult.success) { await llQuizApi.navigation.goNext(); } else { console.log('Cannot navigate: step is invalid'); } }); ``` ### Adding UTM Parameters ```javascript theme={null} window.addEventListener('ll-quiz-init', (event) => { const llQuizApi = event.detail.llQuizApi; // Extract UTM parameters from URL const urlParams = new URLSearchParams(window.location.search); const utmSource = urlParams.get('utm_source'); const utmMedium = urlParams.get('utm_medium'); const utmCampaign = urlParams.get('utm_campaign'); // Add to additional response data if (utmSource) { llQuizApi.additionalResponseData.set('utm_source', utmSource); } if (utmMedium) { llQuizApi.additionalResponseData.set('utm_medium', utmMedium); } if (utmCampaign) { llQuizApi.additionalResponseData.set('utm_campaign', utmCampaign); } }); ``` ### Blocks with Network Validation ```javascript theme={null} window.addEventListener('ll-quiz-init', async (event) => { const llQuizApi = event.detail.llQuizApi; // Email field with API validation const emailBlock = llQuizApi.getBlockByID('email-field-123'); emailBlock.setValue('user@example.com'); // This will trigger network validation if apiValidation is enabled console.log('Email validation:', await emailBlock.validate()); // Phone number field with API validation const phoneBlock = llQuizApi.getBlockByID('phone-number-123'); phoneBlock.setValue('+1234567890'); // This will trigger network validation if apiValidation is enabled console.log('Phone validation:', await phoneBlock.validate()); // OTP field const otpBlock = llQuizApi.getBlockByID('otp-123'); otpBlock.setValue('123456'); // This will trigger network validation console.log('OTP validation:', await otpBlock.validate()); }); ``` ### Conditional Visibility Reacting to **ll-quiz-value-change** keeps the visibility in sync as the visitor answers, instead of evaluating once on load. ```javascript theme={null} window.addEventListener('ll-quiz-value-change', (event) => { const { blockName, value, llQuizApi } = event.detail; if (blockName !== 'plan') return; const premiumBlock = llQuizApi.getBlockByName('premium-features'); if (value === 'premium') { premiumBlock.visibility.show(); } else { premiumBlock.visibility.hide(); } }); ``` ### Dynamic Label Updates ```javascript theme={null} window.addEventListener('ll-quiz-value-change', (event) => { const { blockName, value, llQuizApi } = event.detail; if (blockName !== 'plan') return; const featuresBlock = llQuizApi.getBlockByName('features'); if (value === 'premium') { featuresBlock.setLabel('Premium Features (Select all that apply)'); } else { featuresBlock.setLabel('Standard Features'); } }); ``` ### Reacting to Visitor Answers **ll-quiz-value-change** reports every committed answer with the value before and after the change and who made it. Ignore changes with a source other than `user` when you only want visitor input. ```javascript theme={null} window.addEventListener('ll-quiz-value-change', (event) => { const { blockName, blockType, stepName, value, previousValue, source } = event.detail; // Ignore changes made by scripts or by the quiz itself if (source !== 'user') return; console.log(`${blockName} (${blockType}) on step ${stepName}: "${previousValue}" -> "${value}"`); }); ``` # Use Car Make API for Vehicle Data Collection Source: https://docs.landerlab.io/features/quizzes/blocks/car-make-api Use Car Make API to collect vehicle data with dynamic make, model, and year selection for accurate and structured inputs. The Car Make API is a built-in feature that allows you to collect detailed vehicle information without manually creating lists of makes, models, and years. It automatically handles the full vehicle selection flow, saving time and ensuring accurate data.