When configuring Applications, you can also customize some of the UI components that are displayed to a customer.

Using the Index.html tab you can customize:

  • Application title
  • Header and Body Tag content
  • Text displayed while a Mobile Web Application is loading
  • Spinner image used for a Mobile Web Application

Index.html customization is available for applications on the Agent, Collaboration, Mobile Web and Web Self Service channels.

When customizing Index.html content, keep in mind that the primary design mechanism for UI components is the Admin Console's Themes resource. Themes are where you should provide comprehensive CSS-based UI design. Index.html customization is not intended to replace the Themes resource, but to provide additional UI design flexibility at the application level.

The following shows an example customized Index.html tab for a Mobile Web application:



To customize Index.html settings for an application:

  1. From the Applications page, click the name of the application you wish to customize. The application will be displayed.
  2. Click the Index.html tab. The UI customization panel will appear.
    Note: Entering text in any of the fields or windows is optional. If you do not enter any text (or you remove previously saved custom text), the application will use the default text that is provided 'out-of-the-box'.
  3. Enter a custom application title in the Title field.
  4. For Mobile Web applications:
    • Enter custom loading text in the Loader Text field. This is text that will be displayed to the user while the application is being loaded from the server to their device.
    • Enter custom CSS in the Style window. This data will be inserted after the existing Style coding for the application. We recommend that this window should be used to change the Loader style only – other styling should be managed using the Themes resource.
  5. Enter custom HTML or Javascript code in the Header window. This data will be inserted after the existing Header code for the application, as shown below:
        <head>
          ...
          [existing header code]
          ...
          [Application-level header data is inserted here]
        </head>
      
    You can insert application level data in the header using the <meta> tag, call third party libraries, or add other components as needed.
  6. Enter custom HTML or Javascript code in the Body (top) window. This data will be inserted before the existing Body code for the application, as shown below:
        <body>
          [Application-level body data is inserted here]
          ...
          [existing body code]
          ...
        </body>
      
  7. Enter custom HTML or Javascript code in the Body (bottom) window. This data will be inserted after the existing Body code for the application, as shown below:
        <body>
          ...
          [existing body code]
          ...
          [Application-level body data is inserted here]
        </body>
      
  8. When finished, click Save at the lower right corner of the panel. A confirmation message is displayed, and the new Index.html settings are stored. To discard your entries at anytime without saving them, click Cancel.

Using Headers to Pass Application-Level Code

You can customize the Header for an application to provide information that will be displayed on the customer's device at runtime.

For example, some devices (like the Apple iPhone running iOS 10) use the Open Graph protocol to enable rich-format previews for hyperlinks that are passed in SMS messages:

    <html prefix="og: http://ogp.me/ns#">
     <head>
      <meta property="og:atitle" content="Purchase Guide" />
      <meta property="og:type" content="pguide.movie" />
      <meta property="og:url" content="https://int.gointeract.io:443/tt0117500/" />
      <meta property="og:image" content="https://int.gointeract.io:443/tt0117500/guide.jpg" />
      ...
     </head>
    ...
    </html>
  

 

Revision:

Comments