Troubleshooting common issues with Custom HTML In-App Automations

This guide walks through some of the common issues encountered when creating In-App Automations which use Custom HTML uploads.

If you are experiencing issues with the process of uploading your HTML file or how it is displaying, you’ll want to review this guide for some of the most common customer-facing issues we have seen.

Questions:

I do not see In-App Automations as an option under the Create button

You will need to have an appropriate plan to use In-App Automations in your own projects. Reach out to your Urban Airship Account Management team or submit a support request with your main account username and an app key for a project on your account.

If you would just like to try out In-App Automations, Our 1st Flight app provides an option to try our built-in templates for In-App Automation and many of our other services to demonstrate them in a real application. It is ready-to-use when you first create your account and is available even to our Free Starter accounts. See our 1st Flight Guide for a walkthrough.

I do not have the Custom HTML option under styles when creating an In-App Automation

Uploading Custom HTML does require access to our Content Delivery Network. Many of our managed plans already include this service, which is enabled when requested. Submit a support request with your main account username and an app key to inquire about CDN access for your account.

I uploaded my file but cannot move to the next step

Generally this means that there is an issue with the formatting of the HTML file and it did not pass validation.

A few issues we have seen:

  • `XHTML` files - We only accept html5 formatted files, XHTML is not supported.
  • Incorrect MIME type - MIME (Multipurpose Internet Mail Extensions) is a way of identifying files on the Internet according to their nature and format. Some text editors may assign an unexpected MIME type, even if saving with a `.html` file extension. We recommend editing your files with a modern text editor such as Atom or Sublime, or with an IDE such as VS Code.
  • Issues with HTML, CSS, or JS. - If you are missing a tag or have other issues with your file, it may not upload. We suggest using a HTML validator prior to uploading. The modern text editors and IDEs mentioned above have packages which will validate your HTML directly in your editor.

I would like to include images, css, or other script files in my HTML

In-App Automations only allow for an HTML file to be uploaded directly in our Dashboard. Any additional images, CSS, or scripts will need to be hosted separately through a Content Delivery Network or public repository.

You will want to confirm any outside hosting service has the ability to handle load generated by your users viewing the In-App Automation.

Alternatively, an option would be to include all css and scripts in the html file.

The In-App Automation is being displayed as a modal on phones. I would like it to take up the full screen

By default the Custom HTML style will match modal appearance and elements.

You can make a Custom HTML message display as full screen on small screen devices. Use this setting if you want your message to take over the entire screen on a phone but display as a modal on a tablet. See: Settings: Configuration: In-App Automation.

The In-App Automation is displayed as a modal on tablets

Tablets will always show In-App Automations in a modal in order to preserve the style and aspect ratio of the HTML.

I set my In-App Automation to display full screen on smaller devices, but I am still seeing white space around the message or other formatting issues

If you are having issues with full screen on Android devices, ensure that the version of the Urban Airship SDK is up to date in your application and that you are using the “background-color” css tag on the HTML element to color the background. Setting this on the “body” or any other element may not cover the entire background.

Due to the onscreen UI elements on some iPhone models (ie: iPhone X), the HTML is restricted within a certain safe area to prevent conflicts. These iPhone models will show white space in these areas.

If your use case requires for the full background to be colored, you can do so through advanced customization of the InAppMessageManager class (iOS and Android). You can find guidance in the linked guides, but exact steps are outside the scope of this article.

My In-App Automation is not displaying as expected based on the documentation

In-App Automations will take on the global styles at the time of the message creation. If the message is not displaying based on the currently selected options, you will want to try to create a new automation.

If this does not display as expected, you will want to confirm you are on the latest version of our SDK in your application.

If the message continues to not display to your expectations submit a support request including your HTML file along with the following information:

  • App Key (See our Guide: How to Find Your App Key and Secret)
  • Link to In-App Automation in the Dashboard
  • Your expected behavior
  • Screen capture (video, gif, or image) of the actual behavior, and description of the issue
  • Make and Model of Test Devices? Also are they physical devices or emulators?
  • Version of our SDKs which are implemented in your application
  • Are you using the current version of our SDK from our developer resources? Can you recreate it using the sample application for the SDK in use?


Related Links