How to Set Up Your STQRY App’s Branding with Icons, Colors and Custom Domains

Setting up your STQRY app’s branding helps create a consistent and professional look that aligns with your business. In this guide, you'll learn how to customize your app with brand colors, add a recognizable app icon, and set up a custom domain for a seamless user experience.

By following these steps, you can make your STQRY app visually appealing, easy to recognize, and fully aligned with your brand identity. Let’s get started!

Adding App Colors

To access the app colors go to Projects (1) and then click on Branding (2). Here you will see the available options for color changes you can make to the app.

App Color Options

• Background: The main background of the app content
• Body text: The default text colour through the app
• Warning text: Used for warning text & errors
• Tab bar: The background colour of the bottom tab bar
• Tab bar content: The tab icon and text base colour
• Header/Nav bar backgrounds: For page headers and top navigation strips
• Button background (action/start): For action buttons, e.g. 'Start tour'
• Border base colour: Borders will be derived as 7-18% tints of this colour
• Button background: Default button background
• Android Logo background: Logo with a transparent background will be filled with this color on Android

Below you can see some examples of the color selections shown above displayed in an app.

Changing the Color

To change the default app color for each option, click on the colored squared and it will open a color selection pop-up.   

Now you can either drag the selection tool around to select your color or enter the Hex number if you have a branding guideline to follow.

Once the colors are selected don't forget to hit Save at the bottom right of the screen.

Accessibility Warning: Contrast and color use is vital to accessibility. So you may see warnings for contrast ratios for color selections that break accessibility guidelines. Colors will either be too light or too dark.

Adding an App Icon

To add the app icon to your project please email your Customer Success Manager or the support team. One of our team will add your app icon to the backend for you. You can also add the app icon to the builder by choosing Projects >> your app >> Branding.

It's advised to keep your app icon simple and easily recognizable. A logo, symbol, or plain image is best. Keep in mind the icon on a mobile device is quite small. Avoid complex images and lots of text if possible.

The app icon size is 1024px by 1024px. PNG or JPEG are the best formats. For the best practices, please refer to the official guides from Google Play and Apple Sore.

Updating the Icon

If you need to update your app icon please contact your Customer Success Manager or the support team to let them know. An update will need to be submitted to both Apple and Google Play to make sure the new icon is reflected in the app and store listings.

Setting Up a Custom Domain for Your STQRY Web App

Customizing your web app's domain name can improve brand recognition and establish a stronger online presence. When you sign up for a STQRY app, you're assigned a default domain ending in ".stqry.app".

However, if you prefer to host your web app under a personalized URL, like "tours.yourcompany.com", STQRY offers the flexibility to connect your custom domain to your STQRY account. 

Step 1: Set up your domain name

• Choose what domain you would like your tours hosted on. Note that it must be a subdomain and not a root domain. For example tours.myorg.com and not just myorg.com.
• Log in to your domain registrar's website and access your Domain Control Panel.
• In your Domain Control Panel, go to Admin tools > DNS Manager > Add CNAME record (This might vary based on where you are hosting your domain, please get in touch with your web hosting company for more help.)
• Enter the domain you want to use for your web app (e.g., "tours.yourcompany.com") in the "Name" or "Host" field.
• Copy stqry-apps-production.b-cdn.net to the "Value" field.
• If prompted for a TTL (Time-To-Live), you can enter a value between 30 minutes to 1 hour or leave it blank.
• Once you have added the CNAME record, hit Save. Note that it may take some time for the CNAME record to propagate across the internet.

Step 2: Verify Your Custom Domain

• Once the setup process is finished, please inform your Customer Success Manager of the custom domain name you have chosen (e.g., "tours.yourcompany.com").
• We will enable a setting in the backend and verify if the process was successful.

If you encounter any issues during the setup process, don't hesitate to reach out to our support team at support@stqry.com.