Skip to main content
This article explains how to customize your Game Portal’s appearance and functionality in the Publisher Dashboard. You’ll configure the portal theme, login modal, SEO metadata, and menu navigation.
When adding images, if you provide an external image URL, Appcharge saves and uses the URL as-is. Appcharge doesn’t download, copy, upload, or host the image. If you use an external image URL, host the image on your own infrastructure and keep it available at the provided URL.We recommend uploading image files instead of using external URLs when possible. Appcharge hosts uploaded files on its CDN.

​
Design your Game Portal theme

To design the theme:
  1. In your Game Portal project, go to the Builder tab and click Portal Theme.
  2. In the General Settings section, complete the following fields:
    • General Background Color: Set using the color selector or by entering a hex color. The portal uses this color on desktop or mobile when that view has no background image. For example, if you upload only Background Image (Desktop), mobile uses General Background Color.
    • Section Text Color: Set using the color selector or by entering a hex color. This color applies to section titles across the portal.
    • Section Title Font: Select a font. This font applies to section titles across the portal. If you leave this field empty, the portal uses its default font.
    • Background Image (Desktop): Upload an image. Use 1920 × 1080 px, PNG or JPEG.
    • Background Image (Mobile): Upload an image. Use a 1:2 vertical ratio, minimum 400 px width, PNG or JPEG.
    • Favicon: Upload an image. Use a 1:1 ratio, minimum 32 px width, PNG or JPEG.
    You can override Builder-configured background images using bgImageDesktop and bgImageMobile in the Personalize Web Store Callback.
  3. In the Header section, complete the following fields:
    • Logo: Upload an image. Use a 1:1 ratio, minimum 320 px width, PNG or JPEG.
    • Background Color: Set using the color selector or by entering a hex color.
    • Text Color: Set using the color selector or by entering a hex color.
    • Login Button: Set using the color selector or by entering a hex color.
    • Player ID Font: Select a font. This font applies to player information in the header, including player ID, player name, and balance. If you leave this field empty, the portal uses its default font.
    • Show player name: When enabled, the logged-in player’s name displays in the header.
    • Show player ID: When enabled, the logged-in player’s ID displays in the header.
    • Show player balance: When enabled, the logged-in player’s balance displays in the header.
    • Show login button: When enabled, a login button displays in the header.
    • Show language switcher: When enabled, players can change the portal language from the header. Learn how to set and manage translation files.
  4. In the Content section, complete the following fields:
    • Card Background Color: Set using the color selector or by entering a hex color.
    • Card Text Color: Set using the color selector or by entering a hex color.
    • Card Button Color: Set using the color selector or by entering a hex color.
    • Content Body Text Color: Set using the color selector or by entering a hex color.
    • Card Button Font: Select a font. This font applies to buttons on content cards. If you leave this field empty, the portal uses its default font.
    • Content Background Color: Set using the color selector or by entering a hex color.
    • Header Image Container Opacity: Enter the opacity as a percentage.
    • Header Image Container Color: Set using the color selector or by entering a hex color.
  5. In the Menu section, complete the following fields:
    • Choose one of the following to set where the menu appears on the page:
      • Left Sidebar
      • Top Fixed Header
    • Background Color: Set using the color selector or by entering a hex color.
    • Text Color: Set using the color selector or by entering a hex color.
    • Tab On-Hover Color: Set using the color selector or by entering a hex color.
    • Selected Tab Color: Set using the color selector or by entering a hex color.
    • Navigation Font: Select a font. This font applies to all menu item labels, including default, hover, and selected states. If you leave this field empty, the portal uses its default font.
    • Custom Menu Icon: Upload an image that replaces the default hamburger icon when the menu is closed. Use a 1:1 ratio, PNG or JPEG. If you leave this field empty, the portal uses the default hamburger icon.
    • Custom Menu ‘X’ Icon: Upload an image that replaces the default close (X) icon when the menu is open. Use a 1:1 ratio, PNG or JPEG. If you leave this field empty, the portal uses the default X icon.
  6. In the Footer section, complete the following fields:
    • Background color: Set using the color selector or by entering a hex color.
    • Text color: Set using the color selector or by entering a hex color.
    • Privacy link: Add the URL for your privacy policy.
    • Terms & Conditions link: Add the URL for your terms and conditions.
    • Support link: Add the URL for your support page.
  7. Click Save to apply your changes.

​
Design your login modal

To design the modal:
  1. In your Game Portal project, go to the Builder tab and click Login Modal.
  2. In the Modal Configuration section, complete the following fields:
    • Logo: Upload an image. Use a 1:1 ratio, minimum 320 px width, PNG or JPEG.
    • Background Image: Upload an image. Use a 1:1 ratio, minimum 400 px width, PNG or JPEG.
    • Welcome Text: Enter a short greeting.
    • Font Color: Set using the color selector or by entering a hex color.
    • Font Size: Set the font size.
    • Font Weight: Set the font weight.
    • Font Family: Select the font family.
    • QR Color: Set the QR code pattern color using the color selector or a hex value. If you leave this field empty, the pattern uses General Background Color from Portal Theme, or black if no general background color is set. The QR code background remains white for scannability.
    • Body Text: Enter the modal body text.
    • Require the player’s consent before enabling any login methods: Toggle as needed. When it’s on, login buttons stay disabled until the player checks the consent checkbox.
  3. In the Logout Settings section, complete the following fields:
    • Button Image: Upload an image. Use a 1:1 ratio, minimum 32 px width, PNG or JPEG.
    • Custom ‘X’ Icon: Upload an image. Use a 1:1 ratio, minimum 32 px width, PNG or JPEG.
    • Text: Enter the logout confirmation message. For example, Are you sure you want to disconnect?.
    • Font: Select a font. If you leave this field empty, the portal uses its default font.
    • Color: Set using the color selector or by entering a hex color.
    • Size (px): Set the font size.
    • Weight: Select Regular, Medium, or Bold.
  4. In the OTP section, complete the following fields for the one-time password (OTP) login button:
    • OTP Icon: Upload an image. Use a 1:1 ratio, minimum 32 px width, PNG or JPEG.
    • OTP Button Text: Enter the button label. For example, Login with OTP.
    • Button Color: Set using the color selector or by entering a hex color.
    • Text Color: Set using the color selector or by entering a hex color.
  5. In the Player ID section, complete the following fields:
    • Player ID Icon: Upload an image. Use a 1:1 ratio, minimum 32 px width, PNG or JPEG.
    • Player ID Button Text: Enter the button label. For example, Login with Player ID.
    • Button Color: Set using the color selector or by entering a hex color.
    • Button Text Color: Set using the color selector or by entering a hex color.
  6. Click Save to apply your changes.

​
Configure your Game Portal settings

To configure the settings:
  1. In your Game Portal project, go to the Builder tab and click Portal Settings.
  2. In the SEO Settings section, complete the following fields:
    • SEO Title: Enter the title that appears in search engine results.
    • Description: Enter the meta description for search engines.
    • Keywords: Enter keywords to help search engines index your portal.
    • SEO / Social Share Image: Upload an image to display when your portal is shared on social media.
  3. In the Add to Home Screen section, complete the following fields:
    This feature is available on mobile devices and tablets only.
    • Activate this feature in your portal: Toggle as needed. When enabled, players can save the Game Portal to their mobile device’s home screen as an app-like shortcut.
    • Border and Text Color: Set using the color selector or by entering a hex color.
    • Background Color: Set using the color selector or by entering a hex color.
    • Button Image: Upload an image. If you don’t upload an image, the portal displays a default button labeled ADD TO HOME SCREEN.
    • Icon Image: Upload an image. Use a 1:1 ratio, minimum 32 px width, PNG or JPEG. This icon appears on the player’s home screen when they save the portal as a shortcut.
    • Portal Title: Enter the title that appears with the home screen shortcut.
  4. Click Save to apply your changes.