Appearance

Activity Customization ​

Customize Upshot.ai activities (Surveys, Ratings, Opinion Polls, Trivia, Mini Games) to match your app's branding and design system. Create a seamless user experience by applying your own colors, fonts, images, and styling.

The file-based approach allows you to customize activities using JSON configuration files, custom fonts, and images. This method provides the most comprehensive customization options.

Getting Started ​

Step 1: Download Customization Package ​

Download the complete customization package containing JSON configuration files:

Download Customization Files

Download Upshot Flutter Customization Package

This ZIP file contains:

  • JSON configuration files for all activity types (Survey, Rating, Poll, Trivia)

Step 2: Extract and Review Files ​

Extract the downloaded ZIP file to review the included customization files:

Upshot_Flutter_Files/
├── UpshotSurveyTheme.json       # Survey activity configuration
├── UpshotRatingTheme.json       # Rating activity configuration
├── UpshotPollTheme.json         # Opinion poll configuration
├── UpshotTriviaTheme.json       # Trivia activity configuration

Step 4: Platform-Specific Installation ​

Install the customization files for your target platforms:

iOS Setup ​

  1. Add Configuration Files: Place JSON files in your iOS project root
  2. Install Custom Fonts: Add font files and register them in Info.plist
  3. Add Custom Images: Place images in Images.xcassets with proper resolutions
bash
# iOS Project Structure
ios/
├── YourApp/
│   ├── UpshotSurveyTheme.json          # Activity configurations
│   ├── UpshotRatingTheme.json
│   ├── UpshotPollTheme.json
│   ├── UpshotTriviaTheme.json
│   ├── Images.xcassets/            # Custom images
│   │   ├── upshot_bg.imageset/
│   │   │   ├── upshot_bg.png       # @1x
│   │   │   ├── upshot_bg@2x.png    # @2x
│   │   │   └── upshot_bg@3x.png    # @3x
│   │   └── custom_icon.imageset/
│   ├── Fonts/                      # Custom fonts
│   │   ├── CustomFont-Regular.ttf
│   │   ├── CustomFont-Bold.ttf
│   │   └── CustomFont-Light.ttf
│   └── Info.plist                  # Font registration
xml
<!-- Add to Info.plist -->
<key>UIAppFonts</key>
<array>
    <string>CustomFont-Regular.ttf</string>
    <string>CustomFont-Bold.ttf</string>
    <string>CustomFont-Light.ttf</string>
</array>
bash
# In Xcode:
# 1. Drag JSON files to project root (ensure "Add to target" is checked)
# 2. Drag font files to project (ensure "Add to target" is checked)
# 3. Drag image assets to Images.xcassets
# 4. Update Info.plist with font references
# 5. Clean and rebuild project

Android Setup ​

  1. Add Configuration Files: Place JSON files in the assets folder
  2. Install Custom Fonts: Add font files to the res/font directory
  3. Add Custom Images: Place images in drawable folders with density variants
bash
# Android Project Structure
android/
├── app/
│   └── src/
│       └── main/
│           ├── assets/                    # Configuration files
│           │   ├── UpshotSurveyTheme.json
│           │   ├── UpshotRatingTheme.json
│           │   ├── UpshotPollTheme.json
│           │   ├── UpshotTriviaTheme.json
│           └── res/
│               ├── drawable-mdpi/         # Images @1x
│               │   ├── upshot_bg.png
│               │   └── custom_icon.png
│               ├── drawable-hdpi/         # Images @1.5x
│               ├── drawable-xhdpi/        # Images @2x
│               ├── drawable-xxhdpi/       # Images @3x
│               ├── drawable-xxxhdpi/      # Images @4x
│               └── font/                  # Custom fonts
│                   ├── customfont_regular.ttf
│                   ├── customfont_bold.ttf
│                   └── customfont_light.ttf
xml
<!-- android/app/src/main/res/font/font_family.xml -->
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/customfont_regular" />
    <font
        android:fontStyle="normal"
        android:fontWeight="700"
        android:font="@font/customfont_bold" />
    <font
        android:fontStyle="normal"
        android:fontWeight="300"
        android:font="@font/customfont_light" />
</font-family>
bash
# In Android Studio:
# 1. Right-click assets folder → New → File → Add JSON files
# 2. Right-click res/font → New → Font Resource File → Add fonts
# 3. Add images to appropriate drawable-density folders
# 4. Sync project with Gradle files
# 5. Clean and rebuild project

Step 5: Apply Customizations ​

After the files are successfully installed, set enableCustomization to true when initializing the Upshot SDK. No extra code changes are needed in your Flutter app.

Troubleshooting ​

Common Issues ​

Theme not loading:

  • Verify JSON files are in correct platform directories
  • Check JSON syntax is valid (use online JSON validator)
  • Ensure file names match exactly: survey_config.json, rating_config.json, etc.
  • Clean and rebuild your project after adding files

Fonts not appearing:

  • iOS: Verify fonts are added to Info.plist and included in app bundle
  • Android: Check font files are in res/font/ with lowercase names
  • Verify font family names match exactly in JSON configuration

Images not displaying:

  • Check image file formats (PNG/JPEG recommended)
  • Verify proper resolution variants are provided
  • Ensure image names in JSON match actual file names

Powered by Upshot.ai