Skip to main content

Configure the App

After setup completion, the next step is to configure your GlamAR app. Click the Configure button on the success screen to begin.

Image

Clicking this button redirects you to the SDK Configuration page, where you can fine-tune your app’s appearance, connectivity, and behavior before going live.

General settings

Allowed Domains

The Allowed Domains setting defines a list of trusted origins where the SDK is permitted to load and function. This acts as a security measure to prevent unauthorized usage of the SDK on unverified platforms. Only the origins listed here will be allowed to embed and interact with the GlamAR SDK. Any request from an unlisted origin will be blocked by default.

Image

For Web Platforms, enter one or more domain names where the SDK will be embedded.

  • Enter full URLs (for example, https://yourstore.com, https://test.myapp.com).
  • Separate multiple domains using commas (,).
  • Wildcards (for example, \*.example.com) are not supported unless explicitly mentioned.

Preview on Smartphone

This option provides a QR code that lets you preview how your app will appear on a mobile device.

Image

Usage:

  • Scan the QR code with your smartphone's camera to instantly open a live preview of the app.
  • Click on the Download button to share the QR code with others or embed in your testing documentation.

The Share link is a unique URL that allows you or other users to preview your app in a browser.

Image

Usage:

  • Open the link in your browser to test the app in a desktop or mobile view.
  • Share the link with teammates, stakeholders, or testers for collaboration and feedback.

SDK Version

You can switch to a different SDK version based on your project requirements. From the dropdown list, select the version you want to use and click the Update version button to apply the change.

Image

Best practice:

  • Always use the latest SDK version to benefit from the newest features, performance improvements, and security patches.
  • Review the Release page before updating to understand any breaking changes or new capabilities.

Language Support

The SDK currently supports English as the default and only available language. Future updates may include additional language options to enhance accessibility for a broader audience.

Try-On Modes

Choose how you can experience products virtually:

  • Live try-on: Uses the device's camera to overlay the selected product in real time, allowing you to see how it looks.
  • Model try-on: Displays the product on a pre-selected human face model image, allows you to preview the item without using your device's camera.

Image

You can upload custom images for each mode, which will be shown during the product try-on experience.

Supported formats:

  • PNG, JPG, WEBP
  • Maximum file size: 5 MB per image
info

Use high-quality, well-lit images with a neutral background for the most realistic try-on results.

Watermark

Displays a "Powered by GlamAR" watermark at the bottom of the screen. Enabled by default, this watermark can be removed with a Premium Plan.

Hero Section

Allows you to customize the banner image displayed in the console window. You can replace the default banner with any image that aligns with your brand or personal preference.

Image

Usage:

  • Upload a new image file from one of the following methods:
    • Add URL: Paste the direct link to the image.
    • Upload file: Select an image from your device.
  • Supported aspect ratios: 1:1 and 16:9.
  • Supported formats: PNG, JPG, WEBM.
  • Maximum file size: 5 MB.

Content

Allows you to customize the text content displayed on the console page. You can update two text elements:

  • Header Text: The main title displayed at the top. (Maximum 40 characters)
  • Subtitle Text: The supporting text displayed beneath the header, typically used for a short description or tagline. (Maximum 100 characters)

Appearance

Typography

Allows you to set a custom font for text displayed in the console window. Select your preferred font from the dropdown list. Currently supported fonts:

  • Inter
  • Poppins
  • Roboto
  • Open Sans
  • Lato
  • Montserrat

Image

Theme Selection

You can switch between built-in themes or create your own custom theme as per your choice.

  • Light Theme: Clean and minimal white interface.
  • Dark Theme: Sleek dark interface for immersive experiences.
  • Custom Theme: Define a personalized color scheme, ensuring the SDK matches your brand’s identity. Available options include:
    • Color scheme: Choose between Light or Dark as the base theme.
    • Primary Color: Sets the main accent color used across UI elements.
    • Icon Color: Defines the default color for icons in the interface.
    • Selection Color: Specifies the highlight color used when elements are selected.

Advance Settings

Image

General Features

The General Features section allows you to toggle on or off several common options in the try-on window. The available options are:

  • Show global cart: Display the global shopping cart button in the try-on window.
  • Show global wishlist: Display the global wishlist button in the try-on window.
  • Show global share: Display the global share option for quick content sharing.
  • 3D view: Enable or disable the 3D product view button in the try-on window.

Product Details

The Product Details section allows you to toggle on or off various product-related options in the try-on window. The available options are:

  • Show add to cart: Display the Add to cart button for quick product purchasing in a try-on window.
  • Show wishlist: Display the wishlist option for saving products.
  • Show Price: Display the product price.

Others

The Others section allows you to toggle several UI related options within the try-on window. These settings let you control which navigation and interface elements are available to users. The available options are:

  • Allow Back: Enable or disable the back navigation option in the try-on window.
  • Allow Close: Enable or disable the close button for exiting the try-on experience.
  • Allow Camera Switch: Enables users to switch between the front and rear cameras when accessing the try-on window through a mobile interface.
  • Allow Full-Screen: Allow the try-on window to expand to full-screen mode.
  • Allow Product Name: Display or hide the product name within the try-on window.

Category Tools

Compare tool

The Compare tool lets you view a side-by-side comparison of two products directly within the try-on window. This helps in quickly evaluating differences in features, appearance, or specifications without switching screens.

Image

Settings

The Settings toggle allows you to enable or disable the settings icon in the try-on window. Once enabled, it provides access to the Position adjustment tool and Measurement tool.

Image

Position adjust tool

Lets users adjust the position of the 3D ring model in try-on mode to ensure accurate alignment on the finger.

Measurement tool

It measures eyewear fit and provides sizing guidance. The Measurement tool includes an Instructions screen for guiding users through the process.

A custom banner image displayed in the instructions window, useful for branding or providing visual guidance.

Image requirements:

  • Aspect ratios: 1:1 or 16:9
  • Supported formats: PNG, JPG, WEBM
  • Maximum file size: 5 MB

Upload methods:

  • Add URL: Click this button to add a direct link to the image.
  • Upload File: Click this button to select an image from your local storage.
Content

Two editable text fields for displaying instructions:

  • Header Text: The main heading for the instructions window.
  • Sub Text: Supporting text to explain steps or provide additional guidance.

Custom Code

The Custom code tab is designed for advanced customization of the SDK's user interface and layout. It provides a built-in code editor where you can modify code to tailor the UI experience beyond the predefined options available in other configuration tabs.

Parameter Details

KeyTypeDefaultDescription
allowToastBooleanfalseControls whether toast notifications are displayed inside the try-on window.
openLiveOnInitBoolean`falseIf set to true, the live try-on window opens automatically on initialization.
popUpOverridesObject{ quit: false, result: false, restart: false }Contains toggles to enable or disable specific pop-up dialogs.
popUpOverrides.quitBooleanfalseControls the display of the quit confirmation pop-up.
popUpOverrides.resultBooleanfalseControls the display of the results pop-up after a try-on session.
popUpOverrides.restartBooleanfalseControls the display of the restart pop-up when restarting the try-on flow.
screenOverridesObject{...}Overrides entire UI screens, enabling or disabling them.
heroScreenBooleanfalseControls visibility of the hero screen in the flow.
domainBlockBooleanfalseDisplays or hides the domain restriction/block screen.
billingBlockBooleanfalseDisplays or hides the billing-related restriction screen.
cameraFailedBooleanfalseDisplays or hides the camera failure error screen.
cameraAccessDeniedBooleanfalseDisplays or hides the “Camera Access Denied” error screen.
somethingWentWrongBooleanfalseDisplays or hides the generic error/fallback screen.
allowBottomSheetBooleanfalseEnables or disables the bottom sheet UI element in the try-on window.
  • All values are Boolean and can be set to true (enabled) or false (disabled).
  • screenOverrides and popUpOverrides are nested objects: you can selectively override only the screens or pop-ups you need.
  • Default values are set to conservative values (false) to avoid showing unnecessary screens/pop-ups unless explicitly enabled.

Saving and Publishing Changes

Once all SDK configuration updates are complete, you can choose how to save your changes:

  • Reset to Default: Click Reset To Default to discard all changes and restore the configuration to its original state.
  • Save a draft: Click the Save button to save the current configuration as a draft. Drafts allow you to store settings without making them live, so you can revisit and refine them later.
  • Publish: Click the Publish button to apply and save all changes. Published settings are immediately reflected in the SDK.
info

Use save draft method while experimenting with configurations, and only publish once you're confident that the settings are ready for production.