---
title: App onboarding configuration
slug: experience/app-onboarding-configuration
description: App onboarding configuration
docTags: 
createdAt: 2022-10-11T13:27:26.000Z
---

In this article, you learn how to configure your app onboarding in the Experience Builder. 

Read this article to get more context of the [App onboarding](docId\:maB9hcwAeUE4emhkEGL4H).

## Preconditions

- Image files: Image file per step in JPEG format (1x for phone + 1x for tablet)
  - For phone, size 1080x1920 px
  - **And **for Tablet, size 2048x1536 px
- Icons: One image file per step with icon in PNG format with transparent background, size 1280x1280 px.
- Texts: For each step, a headline and a short text, max. 300 characters.
- Buttons: desired colour as RGB value, e.g. (0,0,255) for blue; and desired button text, e.g. "Skip"

## How-to guide

### Access the onboarding folder in the Experience Builder

1\. Go to Experience builder, choose the desired app from the list and klick on it

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/0f7d375c-d4b6-4686-8cd6-748b097073e2/08d3719d-b98d-4fd1-bb59-62761985b96c.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2880%3A676)

2\. Click on 'Pull from preview'

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/c7AQUz0cWgKg-D8fLXQgE_grafik.png)

3\. Click on 'default'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/e8e726c7-4cb5-41a8-b571-210f37710ab2/c0a9d182-dfea-42c1-a763-9234f35b6f5c.png?crop=focalpoint\&fit=crop\&fp-x=0.4315\&fp-y=0.4310\&fp-z=1.1603\&w=1200\&ar=2880%3A1440)

4\. Click on 'onboarding

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/73234845-e5e5-4c08-8ce6-4f1182c64a39/59de16ef-7468-4851-8ba3-fa9ecd29b836.png?crop=focalpoint\&fit=crop\&fp-x=0.4303\&fp-y=0.4310\&fp-z=1.1603\&w=1200\&ar=2880%3A1440)

:::hint{type="success"}
You have now access the onboarding folder in the Experience Builder
:::

### Upload images for your onboarding

5\. Click on 'assets'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/08f3ea33-8638-4640-8326-d800a270ee7f/fdf43a3a-6fb6-4d9e-96ca-d80c8e6c8ef0.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2146%3A1032)

6\. Click on 'config'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/f90b1e3a-e20f-4e15-af70-1304f30476bd/439785cb-f054-46bb-93aa-562522a17731.png?crop=focalpoint&fit=crop&fp-x=0.2418&fp-y=0.3271&fp-z=2.0672&w=1200&ar=2880%3A1440" size="70" width="1200" height="600" position="center" showCaption="false"}

7\. Click on 'onboarding\_images'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/da1f64b7-09fa-4f6c-b14d-cac19fc54b45/23346493-7112-4824-9c38-6ef60edfac2d.png?crop=focalpoint&fit=crop&fp-x=0.0736&fp-y=0.2736&fp-z=2.5946&w=1200&ar=2880%3A1440" size="70" width="1200" height="600" position="center" showCaption="false"}

8\. Click on 'Actions'

::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/X-ZkBM-VVrmzzZ1L3RKMj_onboarding-actions.png" size="70" width="886" height="1094" position="center" showCaption="false"}

9\. Click on 'Upload files'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/7f91a3d5-f711-4b26-a281-52ac4754a4c0/f8bc9ee6-fb21-47e7-b239-a5147a1abeb0.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.0000&w=1200&ar=930%3A1161" size="70" width="1200" height="1498" position="center" showCaption="false"}

10\. Upload your 2 images from file upload menu, 1x for Phone (e.g. '7\_FeedbackPhone.jpg') and 1x for Tablet (e.g. '7\_FeedbackTablet.jpg') and wait, until the green box 'Uploaded' appears.

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/0adc7245-5307-4b32-888d-23596502a6e4/de348961-32ac-4b24-8db5-f14dc8cf78fc.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.0000&w=1200&ar=2077%3A1311" size="94" width="1200" height="757" position="center" showCaption="false"}

:::hint{type="success"}
You have now successfully uploaded a phone and a tablet image to your onboarding
:::

### Change the button text in the messages.json

11\. Click on 'config'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/20d77578-869e-4cf5-abe1-c706b7902118/af33c15e-b9f2-4228-8039-1e6d105acdb7.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.0000&w=1200&ar=780%3A926" size="70" width="1200" height="1425" position="center" showCaption="false"}

12\. Click on 'messages.json'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/42cb1a40-2ac3-4505-a7e6-7f2a923cc1c4/f25103ec-eee6-4fad-adb5-3e6e8bfb62a4.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.0000&w=1200&ar=784%3A786" size="70" width="1200" height="1203" position="center" showCaption="false"}

13\. Mark the text 'Skip' and overwrite it with your text, e.g. 'Miss out'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/389849e7-872d-4002-a6e0-72e0f510d7f4/713a6e22-c484-4d6f-b39f-2a83bc2e64f1.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=1298%3A846)

14\. Mark the text 'Done' and overwrite it with your text, e.g. 'Determine'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/cf1191de-33a6-40d6-a843-82cf21322b0e/dd0fc589-3214-4a64-9121-ee2bd3be84c2.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.0000&w=1200&ar=1352%3A914" size="80" width="1200" height="811" position="center" showCaption="false"}

:::hint{type="success"}
You have successully changed the button text for your onboarding.
:::

### Add a new step to your onboarding

15\. Scroll down in the JSON file and mark the last paragraph

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/66a6c4bc-fa2d-4941-92af-ecd21289cd05/0728f117-4a73-42a0-a337-95a5f85c17ac.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2270%3A1070)

17\. Copy and paste it directly below, before the last '}'

::Image[]{src="https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/50fd7d86-423c-46a9-ab02-f315d83345cc/e8bab11a-944b-4bf9-987f-950a448284c9.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.0000&w=1200&ar=2268%3A1134" size="98" width="1200" height="600" position="center" showCaption="false"}

:::hint{type="success"}
You have now successfully added a new step to your onboarding
:::

### Change the title text and body text of your new step of onboarding 

18\. We now insert your title text for the new onboarding step: Next to "title", mark the orange text in quotations marks and overwrite it with your own title text, e.g. "Feedback function"

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/45390275-f698-4247-93ff-77ddc3bb9194/8a8cedce-9b1c-4c17-895d-e539614f616b.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2260%3A958)

19\. Next to "body", mark the orange text in quotations marks and overwrite it with your own body text, e.g. "Whenever you wish to ask a question or give us feedback, get in touch with us via the feedback function!"

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/ee99ea48-6159-44ad-abfc-9410a5333c6a/b68cee1d-a4a9-46b7-bcab-ccdcb8b709d9.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2768%3A864)

:::hint{type="success"}
You have now successfully changed the title text and the body text of your new step of onboarding
:::

### Map the recently uploaded images

20\. Go to the line "phone" and overwrite the image name in the path with the name of the image for phones, that you uploaded in step 9, e.g. '7\_FeedbackPhone'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/4134d8e0-1d23-4e73-8a4a-56af6f111ed5/02a1b6b4-04e0-457e-95e9-e8df41e3650d.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2520%3A930)

21\. Go to the line "tablet" and overwrite the image name in the path with the name of the image for tablets, that you uploaded in step 9, e.g. '7\_FeedbackTablet'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/55edda74-fc2c-43e8-9a6d-e13b522f84ff/62669701-602e-4b39-af3c-9dde97519145.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=1777%3A747)

:::hint{type="success"}
You have now successfully mapped the recently uploaded images to your onboarding
:::

### Change the accent colour of your onboarding

22\. Click on 'style.json'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/0ca1a945-ee87-421a-bb63-34552dcfa31f/d3d1c8e9-fcbd-4924-82ba-83113364de49.png?crop=focalpoint\&fit=crop\&fp-x=0.2362\&fp-y=0.2503\&fp-z=2.0000\&w=1200\&ar=2880%3A1440)

23\. Go to the line "accent" and overwrite the orange text in brackets with the RGB colour of your choice to change the accent colour for your onboarding. E.g. (0,0,255) for blue

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/2276ef0f-c078-4bf2-a2a4-41913b1b1d79/d64563ca-48c0-4378-88b7-efcece7f9106.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=1506%3A770)

:::hint{type="success"}
You have successfully changed the accent colour of your onboarding
:::

### Merge your changes to update the dynamic resources

24\. Click on the burger menu

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/b26b7a18-25bd-4952-8075-657379a80f7e/2cd8309b-8706-48bd-b646-f52919583627.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2870%3A756)

25\. Click on 'Update Dynamic Resources' in the dropdown

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/976d37c1-5b9a-4c73-9e0d-426ed4dad88c/7499ed8d-3cb7-4b16-add8-e96460e0245e.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2872%3A764)

26\. Name your recent changes, e.g. with 'configured-onboarding-091122'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/b223fbd1-ab95-41d2-a904-82de6ffbf20f/e229ea88-d3ef-4be3-bf2b-01d67b96cde1.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2628%3A1104)

27\. Click on 'Merge'

![](https://images.tango.us/workflows/d064e164-3b5f-42b3-9f51-6327e2ab04b0/steps/86420efa-ee31-41b0-94ee-2b417cf18bf1/fa14da93-df1b-4c94-8304-1874d8308cd1.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2628%3A1104)

:::hint{type="success"}
You have successfully merged your changes in the onboarding and updated the dynamic resources
:::

::embed[]{url="https://support.sprylab.com/en/support/solutions/articles/9000188778-onboarding"}

::embed[]{url="https://support.sprylab.com/en/support/solutions/articles/9000188778-onboarding"}



::embed[]{url="https://support.sprylab.com/en/support/solutions/articles/9000188778-onboarding"}