# Mobile

### Add Templates

You can start designing the campaign by adding templates by clicking on the ➕ icon on the left side. You can select from [tooltips](https://guides.apxor.com/product-guides/create-a-campaign/mobile/campaign-designs/tooltips), [inapp-messages](https://guides.apxor.com/product-guides/create-a-campaign/mobile/campaign-designs/in-app-messages), [coachmarks](https://guides.apxor.com/product-guides/create-a-campaign/mobile/campaign-designs/coachmarks) and [badges](https://guides.apxor.com/product-guides/create-a-campaign/mobile/campaign-designs/badges). Once you have found the right template, click “Select”.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FHX3qAXKrU8RbChWZGQ6o%2FAddTemplate.gif?alt=media&#x26;token=2f32a2da-28df-45ea-800d-893c93c80c36" alt=""><figcaption></figcaption></figure>

### Select Test Device

You will need to select a test device for the templates that will anchor to a UI element. Search and select your device name. If your device is not registered already, [follow the steps here to get it registered](https://guides.apxor.com/product-guides/adding-a-test-device). Open the application on your test device. Click on “Enable Widget”. Then you will see the Apxor logo on the top center of your test device screen. Click on that logo, then click on "**Select this screen**".

{% hint style="info" %}
**Note**

You need to add the test device again if you reinstall the application or clear the application data.
{% endhint %}

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FXL1yxr7LryTKjysIdBEn%2FSelectTestDevice.gif?alt=media&#x26;token=2dfae787-bf3d-4b8c-990a-b823ca21c7ff" alt=""><figcaption></figcaption></figure>

You will see the snippet of your test device screen on the right side. Select the UI element you want the template to anchor to, then click “**Continue**”. You can also click on the previous step to edit if needed.

Select the path or view id/tag of the UI element and click “**Proceed**”.

### Capture Screen with the Widget for Immersive Templates

1. After selecting the immersive card template, click on select screen on dashboard
2. Scan QR Code using your mobile test device
3. Click on "Launch App" in the browser page that opens
4. Click on the Apxor Widget at the top, then click on "Toggle Embed Cards" or "Toggle Stories" to see all the embed cards present on the current screen.
5. To capture the screen for the dashboard, click on the Apxor Widget and select "Select this screen."

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FpfsbBRSfgjqqpXr09o5C%2FWidgetSelection.png?alt=media&#x26;token=1690b2e6-2ca2-422c-83dd-05698caeb5ac" alt=""><figcaption></figcaption></figure>

### Customize your Template

#### Text and Font

To edit the text of the title, description, or buttons, click on the text, and a popup will appear where you can edit the text, font type, font size, and font color. You can also add a custom font by adding ttf/otf file.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FqD6hJQIdoZ5Th9hf7YDO%2FCustomizeTemplate.gif?alt=media&#x26;token=42cff464-a607-4bae-9fe0-f709d39d6e6f" alt=""><figcaption></figcaption></figure>

You can enable **Adaptive Text**; if enabled, the text size will adapt to the end user's device text settings; small, medium, and large. If this is not enabled, the text size selected on the Apxor dashboard will be applied.

You can also select the **Dynamic Text** option as per your need. Using Dynamic Text, we can read and present any of the values of

* User properties
* Session Properties
* UI element in the front end
* Response from an API call
* Dynamic Text

  * Provide your preferred variable name
  * Select the property type
  * Select the property you want
  * Provide the default value and click on “**Add**”.
  * Write your text with the variable name in curly **{var\_name}** braces and click **Save**
  * You can also write the script to trigger conditional dynamic text

  <figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2F3YJWz5tXgBgJkMepai8M%2FDynamicTextReduced.gif?alt=media&#x26;token=16e320dc-3d36-4477-8925-079a6a9a8878" alt=""><figcaption></figcaption></figure>
* Script: We can perform the mathematical and logical operations between the values read for the variables using a few lines of code.

**Unary Operators**

> ! (Negation)

**Logical Operators**

> && (Logical AND)
>
> **`||`** (Logical OR)

**Mathematical Operators**

> `+` (Arithmetic Addition)
>
> `-`(Arithmetic Subtraction)
>
> &#x20;`*`(Arithmetic Multiplication)
>
> **`/`** (Arithmetic Division)
>
> **`%`** (Arithmetic Modulo)

**Comparison Operators**

> < (Less than)
>
> **`<=`** (Less than or Equals)
>
> **`>`** (Greater than)
>
> **`>=`** (Greater than or Equals)
>
> **`==`** (Equality)
>
> **`!=`** (Not Equality)
>
> **`contains`** (Checks if a string contains another string)

**Keywords**

> `httpGet`, `onSuccess`, `onError` will be used to make an HTTP GET API call
>
> **`format`** will be used to format a string
>
> **`if`**, **`else`** will be used to write a conditional evaluation
>
> **`true`**, **`false`** boolean keywords
>
> **`toInt`** will be helpful to convert double/float values to integer
>
> `replace` will be useful for replacing a substring in a string

#### Screen Restriction

Enable Screen Restriction for your InApp to avoid disturbing the user flow on important screens.

1. **None:** Display the nudge without restrictions upon satisfying the trigger condition.
2. **Blacklists:** Select the screens where you want to avoid displaying the nudge.
3. **Whitelists:** Select the screens where you want to display the nudge; rest all the screens will be blacklisted for showing this nudge.

#### Edit Design

You can choose a close button at the top-right corner of a tooltip. Click the close button radio icon in the Edit Design section to enable it in the tooltip. Once enabled, click on the cross icon in the tooltip for further [customizations](https://guides.apxor.com/product-guides/create-a-campaign/campaign-designs/tooltips#close-icon).&#x20;

You can change the background color of the text and buttons by simply clicking on them.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FBbHfNVVq2KuShN4yuIjf%2FButtonActions.gif?alt=media&#x26;token=c2cf370b-6228-49a2-bea0-56edcbe86f26" alt=""><figcaption></figcaption></figure>

You can alter the number of buttons from the available options. You can also change the button action.

* Actions
  * Dismiss

    This action will let the user dismiss this step in the survey, and the user will be shown the next step in the flow.
  * Redirect

    This action will redirect the user to an external link or an internal page in the app.
  * Cancel

    This action will let the user end the entire flow. The flow will end when the user clicks on a button with the “cancel” action, and all the further steps will disappear.
  * Never Show

    This action will stop showing the campaign if the user clicks on a button with the Never Show action, even if the limits are not exhausted for the repetition.

You can also dim the background or enable animation for the nudge/tooltip.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2F9IWwfM8P3kNdSp6qXTWz%2FDimBackgroundReduced.gif?alt=media&#x26;token=8ad17994-1e57-40f8-99e9-2b490fe23674" alt=""><figcaption></figcaption></figure>

* In the Dismiss Config section
  * you can choose if the tooltip/coachmark should be dismissed by clicking outside anywhere on the screen.
  * you can choose if the tooltip/in-app-message/coachmark should disappear automatically after *X* seconds of inactivity by the user.
* You can choose the delay time to show the campaign.

### Preview on Device

You can select the test device from the bottom and click “**Preview on device**” to view the nudge on your test device. Ensure the Apxor overlay widget is enabled on the screen to preview the nudge. You need to kill the app and reopen it after each change for the preview.

You can see the preview screen after clicking “**Refresh**” on the left panel.

Know the difference between [Preview vs. Test vs. Publish](https://guides.apxor.com/product-guides/preview-vs.-test-vs.-publish)

### Next Steps in Campaign Creation

{% content-ref url="mobile/target" %}
[target](https://guides.apxor.com/product-guides/create-a-campaign/mobile/target)
{% endcontent-ref %}

{% content-ref url="mobile/trigger" %}
[trigger](https://guides.apxor.com/product-guides/create-a-campaign/mobile/trigger)
{% endcontent-ref %}

{% content-ref url="mobile/schedule-and-limit" %}
[schedule-and-limit](https://guides.apxor.com/product-guides/create-a-campaign/mobile/schedule-and-limit)
{% endcontent-ref %}

{% content-ref url="mobile/review-and-test" %}
[review-and-test](https://guides.apxor.com/product-guides/create-a-campaign/mobile/review-and-test)
{% endcontent-ref %}

{% content-ref url="mobile/set-priority-and-publish" %}
[set-priority-and-publish](https://guides.apxor.com/product-guides/create-a-campaign/mobile/set-priority-and-publish)
{% endcontent-ref %}