Developer Reference. A mobile loyalty platform for retailers. Document Number:

Transcription

1 Developer Reference A mobile loyalty platform for retailers Document Number:

2

3 CONTENTS Guide Overview Description of this Guide... ix What s new in this guide...x Upgrade impact...xii 1. Getting Started with Alert Introduction... 1 Overview of the Alert platform... 1 Creating an e-commerce platform for your customers... 3 Creating an Alert-based mobile app... 3 Integrating your product catalog... 4 Integrating your organization s infrastructure: the Alert APIs... 5 Creating a loyalty program for your customers: Alert Loyalty... 6 Rewarding customers for activities on social networks: Social Loyalty... 7 Rewarding customers for purchases in your stores: Purchase-based Loyalty Customizing an Alert App Introduction Customization overview Common customizations Prerequisites for customizing your app High-level steps for customizing your app The Alert skin bundle Structure of an ios skin bundle Structure of an Android skin bundle Customizing the images in the app Steps to customize the images in the skin MicroStrategy, Inc. iii

4 Contents MicroStrategy Alert Developer Reference Images used for branding Images used for content elements Images used for navigation elements in ios Images used for navigation elements in Android Images used for navigation menu icons in ios Customizing the colors used in the app Steps to customize the colors used in the app JSON name/value pairs for colors Customizing the app s navigation menu Structure of the navigation menu Customizing the order of items in the app s navigation menu Adding new items to the navigation menu in ios Adding new items to the navigation menu in Android Customizing the app s Explore page Customizing the app s Inbox page Customizing the app s Account page Structure of the Account page Customizing the order of items in the Account page Adding new items to the Account page in ios Adding new items to the Account page in Android Customizing the account creation parameters Steps to customize the account creation parameters JSON name/value pairs for account creation Customizing the app s Social page Structure of the Social page Customizing the order of items in the Social page Adding new tabs to the Social page in ios Adding new tabs to the Social page in Android Customizing the text in the app in ios Steps to customize the text in the app in ios Navigation menu text that you can customize Loyalty card text that you can customize Gift card text that you can customize Notification text that you can customize Login request text that you can customize No content text that you can customize Account page text that you can customize Customizing the text in the app in Android Steps to customize the text in the app in Android Navigation menu text that you can customize iv 2014 MicroStrategy, Inc.

5 MicroStrategy Alert Developer Reference Contents Loyalty card text that you can customize Gift card text that you can customize Notification text that you can customize No content text that you can customize Login request text that you can customize Customizing the text sent from the app in ios Steps to customize the text sent from the app in ios Messages that you can customize in ios Posts for social networks from ios Customizing the text sent from the app in Android Steps to customize the text sent from the app in Android Messages that you can customize in Android Customizing messages sent from the app Downloading the templates Steps to customize the messages sent from the app Common ios customizations for messages Automatically customizable text: Macros List of user account and app download macros List of product offer macros List of Inbox macros List of gift macros List of shared product macros List of receipt macros Adding a link to the app s Account page Compiling your customized skin Testing the customized skin for ios Testing a custom splash screen Making your custom Alert-based app available Allowing MicroStrategy to distribute your app Deploying your ios app on the Apple App Store Deploying your Android app on the Google Play store The Alert Administration API Introduction Prerequisites for using the Alert API Using the Alert API: Creating Alert administration sessions Obtaining an Alert administration session token Creating and managing your store locations: Store Location API Creating a store location Uploading a file containing store locations MicroStrategy, Inc. v

6 Contents MicroStrategy Alert Developer Reference Updating a store location Deleting a store location Retrieving store locations Connecting your customer database to Alert accounts: Customer Linking API Linking a customer s account to their Alert user ID Un-linking a customer s account and their Alert user ID Sending offers to customers: Offers API Obtaining Alert user IDs for targeted offers Adding customers to a message Deleting customers from a message s recipient list Sending coupon codes to customers Deleting coupon codes from customers accounts Retrieving unclaimed coupon codes that have been assigned to customers Redeeming coupons Creating and managing receipts: Receipts API Creating receipts Deleting receipts Replacing receipts (deprecated) Retrieving receipts Managing your purchase-based loyalty program Retrieving a customer s loyalty points Retrieving a customer s loyalty activities Redeeming a customer s loyalty points Tracking your social loyalty programs Retrieving a list of social loyalty activities Redeeming customers social loyalty points Integrating users information with your infrastructure: External Alert sessions Retrieving the contents of users wallets Adding gift cards to users wallets Retrieving users account information The Alert Partner API Introduction Getting started with the Partner API Implementing the Partner API Managing customers authentication accounts using the Partner API Creating new authentication accounts for customers Linking customers Alert accounts to their authentication vi 2014 MicroStrategy, Inc.

7 MicroStrategy Alert Developer Reference Contents accounts Authenticating customers Retrieving customers account information Updating customers account information Resetting customers passwords Merging Alert accounts Managing customers loyalty information using the Partner API Creating new loyalty memberships for customers Retrieving customers membership information Linking customers loyalty memberships to their Alert accounts Un-linking a customer s membership Retrieving additional information from customers Requesting additional customer information using an external Alert session Customizing your Alert app to retrieve user information Using the Partner API for customers gift cards Allowing Alert to check the balance on a gift card Integrating your Magento Store with Alert Legal Notices Introduction Installing and configuring the Alert Connector for Magento Installing the Alert Magento Extension Using Magento with your Alert-based App Displaying product options as images Index MicroStrategy, Inc. vii

8 Contents MicroStrategy Alert Developer Reference viii 2014 MicroStrategy, Inc.

9 GUIDE OVERVIEW Description of this Guide This guide describes the tasks you can perform to create a custom mobile commerce application for your customers. This guide is divided into the following sections: For an overview of the Alert platform, see Chapter 1, Getting Started with Alert. If you want to create a custom Alert-based app that uses your organizations branding, see Chapter 2, Customizing an Alert App. If you are creating a web application to administer your Alert Campaign Management System (CMS) store, for example, to update your physical store locations, you can use the Alert Administration API, described in Chapter 3, The Alert Administration API. If you want to integrate your organization s customer database, such as integrating your customers loyalty memberships with their Alert accounts, and allowing your customers to access your services through the Alert app, you can implement the Alert Partner API as a web service, as described in Chapter 4, The Alert Partner API MicroStrategy, Inc. ix

10 Guide Overview MicroStrategy Alert Developer Reference If you use the Magento e-commerce platform to manage your product catalog, you can use the Alert Magento Connector to provide an integrated native shopping experience to users of your Alert app. For instructions to install and configure the Magento Connector, see Chapter 5, Integrating your Magento Store with Alert. What s new in this guide Alert 3.7 If you use the Magento e-commerce platform to manage your product catalog, you can use the Alert Magento Connector to provide an integrated native shopping experience to users of your Alert app. For instructions to install and configure the Magento Connector, see Chapter 5, Integrating your Magento Store with Alert. Alert 3.6 You can use the Alert Loyalty Program as a purchase-based loyalty solution for your customers. For an overview of the Alert Loyalty Program, see Creating a loyalty program for your customers: Alert Loyalty, page 6. For the APIs that you can use to manage your purchase-based loyalty program, see Managing your purchase-based loyalty program, page 177. The Receipts API has been updated to support purchased-based loyalty programs. For detailed information on the Receipts API, see Creating and managing receipts: Receipts API, page 148. If you are using an older version of the Receipts API, the API calls remain backward compatible. The API to replace receipts has been deprecated. You can send messages to your customers using the Offers API, described in Adding customers to a message, page 128. The customizable Alert app now supports the ipad, using the same skin as the iphone. For detailed information on the customizable Alert app, see Chapter 2, Customizing an Alert App. x 2014 MicroStrategy, Inc.

11 MicroStrategy Alert Developer Reference Guide Overview Additional customization options are available for the customizable Alert app: In the navigation menu, you can specify the background color of each navigation icon using the icon_bg_color key, as described in Structure of the navigation menu, page 34. The navigation menu now supports additional controllers, as listed in Controller IDs used in app links, page 35. The items on the user s Account Page can be customized, as described in Customizing the app s Account page, page 48. The tabs on the Social page can be customized, as described in Customizing the app s Social page, page 59. Alert 3.5 If you have integrated your customers authentication accounts or loyalty memberships with the Alert platform, you can use the authentication account IDs or loyalty membership IDs while making requests to the Alert Administration API, or handling requests for the Alert Partner API. For details on the request formats for the Alert Administration API, see Chapter 3, The Alert Administration API. For details on the request formats for the Alert Partner API, see Chapter 4, The Alert Partner API. If you have created a social loyalty program for your customers, for example, one that awards loyalty points for sharing a product with their contacts, you can track the activities for users who have participated in the program. The API calls for tracking social loyalty activities are described in Tracking your social loyalty programs, page 187. If you are implementing the Alert Partner API, it is recommended that you test your API implementation. The guidelines for testing are provided in Testing your Partner API implementation, page 209. Alert 3.0 This guide was created for Alert MicroStrategy, Inc. xi

12 Guide Overview MicroStrategy Alert Developer Reference Upgrade impact The sections below describe new or changed features for the latest version of the Alert platform, and the impact of the changes on your Alert API implementations. Upgrading to Alert 3.6 The API call to replace receipts has been deprecated. To replace a receipt, you must first delete the old receipt using the API call described in Deleting receipts, page 167, and create a new receipt using the API call described in Creating receipts, page 149. For the Receipts API, the structure of the receipt object has been updated. If you created a receipt using the old structure and need to create new receipts for returned items, you must delete the old receipt and re-create it using the updated structure, described in Creating and managing receipts: Receipts API, page 148. xii 2014 MicroStrategy, Inc.

13 1 1.GETTING STARTED WITH ALERT Introduction This section provides an overview of the Alert platform, and describes the high-level steps to integrate your organization s customer database. The following topics are covered: For an overview of the Alert platform and the features it offers, see Overview of the Alert platform, page 1. For high-level steps to integrate your customer database with Alert, see Creating an e-commerce platform for your customers, page 3. For high-level steps to use Alert as a loyalty program for your customers, see Creating a loyalty program for your customers: Alert Loyalty, page 6. Overview of the Alert platform The Alert platform allows you to easily create a custom mobile commerce app for your customers. Alert integrates the data and content from your 2014 MicroStrategy, Inc. Overview of the Alert platform 1

14 1 Getting Started with Alert MicroStrategy Alert Developer Reference customer systems, such as Customer Relationship Management (CRM) databases, point-of-sale (POS) systems, loyalty programs, and so on, as well as your marketing assets to deliver a tightly integrated user experience on your customers ios and Android devices. Features of the Alert platform The Alert platform offers you and your customers the following abilities: You can send targeted offers to your customers through the Alert Campaign Management System (CMS). Customers can use these offers in your store locations, or gift them to their contacts. You can use Alert as a customer loyalty platform, rewarding customers for purchases they make in your stores, or for sharing your products and updates with their contacts. If you have an existing loyalty program, you can integrate Alert with your program and offer your customers loyalty badges that they can use in the Alert apps for web and mobile. You can analyze your customers behavior and profiles using Alert CMS, and create customer segments based on your analyses. You can send your customers receipts for purchases that they have made at your stores. You can integrate your own mobile commerce site with the Alert apps, allowing your customers to make purchases from within the app. You can send users coupons and loyalty badges, which can be scanned at your store locations. You can create public offers, which potential customers can browse without logging in to the app. When they are ready to make a purchase, they can log in to the app. Your customers can use the Store Locator feature in the Alert app to find your stores in their vicinity. You can integrate your product catalog with the Product Locator feature, so that customers can find products that they are looking for. You can track and analyze users purchase and payment history to reward customers based on their purchases with you. 2 Overview of the Alert platform 2014 MicroStrategy, Inc.

15 MicroStrategy Alert Developer Reference Getting Started with Alert 1 Creating an e-commerce platform for your customers You can use the Alert platform to create an integrated mobile commerce experience for your customers, which incorporates your branding, product catalog, and your existing customer data. The high-level tasks you can perform to create a mobile commerce platform with Alert are as follows: Create a custom, Alert-based mobile app, which uses your organization s branding, as described in Creating an Alert-based mobile app, page 3. Allow customers to browse your product catalog and make purchases from within your Alert-based app, by adding your mobile store to your the app, as described in Integrating your product catalog, page 4. Allow your customers to sign up for your loyalty programs, or add their current loyalty memberships to the Alert platform, as described in Integrating your organization s infrastructure: the Alert APIs, page 5. Creating an Alert-based mobile app The Alert platform provides a demo app, called Trela, which can be customized to reflect your brand s needs. For example, the following image shows an example of a customer s wallet in Trela: 2014 MicroStrategy, Inc. Creating an e-commerce platform for your customers 3

16 1 Getting Started with Alert MicroStrategy Alert Developer Reference You can create a custom skin for the Trela app, using your company s logo, text, color scheme, and images. MicroStrategy then uses that skin to create a version of the app tailored to your needs. If required, you can make your app accessible to an international audience by providing MicroStrategy with translations for the text used in the app. The basic requirements for creating a skin for the Trela app are as follows: A basic understanding of the JavaScript Object Notation (JSON) format. A text editor. An image editor. For detailed requirements, and instructions to create your Alert-based app, refer to Chapter 2, Customizing an Alert App. Integrating your product catalog You can allow Alert users to browse your product catalog and purchase goods from you from within the Alert app, using one of these strategies: If you use the Magento e-commerce platform to manage your products, you can use the Alert Connector for Magento to integrate your Magento store with your Alert-based app. The Alert Connector allows customers to interact with your app in the same way that they interact with your Magento store, while taking advantage of Alert s features to provide a native shopping experience optimized for mobile devices. For steps to install and configure the Alert Connector for Magento, see Chapter 5, Integrating your Magento Store with Alert. If you have a mobile online store, you can integrate your store into your Alert-based app, allowing users to browse your product catalog and make purchases from within your app. Additionally, you can provide your customers with the following abilities: 4 Creating an e-commerce platform for your customers 2014 MicroStrategy, Inc.

17 MicroStrategy Alert Developer Reference Getting Started with Alert 1 Search for products by typing the product s name, as shown in the example below. Search for products by scanning a barcode, as shown in the example below: For detailed steps to integrate your mobile store in your Alert-based app, refer to the Alert CMS help, located at producthelp/alertcms/help/index.html. Integrating your organization s infrastructure: the Alert APIs The Alert platform provides a set of APIs that you can implement to exchange data between Alert and your organization s customer service infrastructure. The APIs allow you to provide a seamless mobile experience for both new and existing customers MicroStrategy, Inc. Creating an e-commerce platform for your customers 5

18 1 Getting Started with Alert MicroStrategy Alert Developer Reference The following are examples of capabilities that you can offer your customers using the Alert APIs: When customers make purchases at your stores, your point-of-sale (POS) system can send them electronic receipts, which can be viewed in your Alert-based app. When customers claim coupons for campaigns that you have created, you can send them coupon codes that they can access in the Alert-based app. If you have created loyalty programs for your customers, you can track these programs, and update customers accounts with the loyalty points they earn. There are two sets of APIs that you can use, described as follows: The Alert Administration API, which allows you to administer your Alert store. To use the Administration API, you create a web service that calls the API to perform tasks such as managing your store locations, sending receipts to your customers, and so on. The Administration API is described in detail in Chapter 3, The Alert Administration API. The Alert Partner API, which allows you to integrate your customer database with Alert. The Partner API must be implemented in a web service that you create, and responds to calls from the Alert platform. The Partner API is described in detail in Chapter 4, The Alert Partner API. Creating a loyalty program for your customers: Alert Loyalty The Alert Loyalty program lets you reward your customers for their interactions with your brand, for example, by awarding customers 10 loyalty points every time they spend $100 in one of your stores. The Alert Loyalty program helps you achieve the following: Engage your customer base with rewards for social actions, online purchases, and purchases in your store locations. If you do not currently have a loyalty program, use Alert to create and host a loyalty program for your customers. 6 Creating a loyalty program for your customers: Alert Loyalty 2014 MicroStrategy, Inc.

19 MicroStrategy Alert Developer Reference Getting Started with Alert 1 If you have your own loyalty program, integrate your loyalty program with Alert. Track the success of your loyalty programs, and view reports on loyalty activities using Alert Intelligence. Define market segments based on customers loyalty data, and create campaigns specifically targeting customers who have loyalty memberships with you. The Alert Loyalty program offers the following solutions: Rewarding customers for activities on social networks: Social Loyalty, page 7 Rewarding customers for purchases in your stores: Purchase-based Loyalty, page 8 Rewarding customers for activities on social networks: Social Loyalty A social loyalty program lets you reward your customers for sharing your offers and updates with their contacts using Facebook, , or SMS text message. The high-level tasks for implementing a social loyalty program are as follows: In the Alert Campaign Management System (CMS), you define the actions that allow users to earn loyalty points. For example: Sharing one of your offers with their Facebook contacts. Liking your Facebook posts. Sharing your Facebook posts. If you do not have your own loyalty program, Alert manages your customers loyalty information. If you have your own loyalty program, you can use the Alert APIs to retrieve your customers activities in Alert, and add them to your loyalty program. For steps to create social loyalty programs in CMS, refer to the Alert CMS Help, located at Help/index.html MicroStrategy, Inc. Creating a loyalty program for your customers: Alert Loyalty 7

20 1 Getting Started with Alert MicroStrategy Alert Developer Reference Rewarding customers for purchases in your stores: Purchase-based Loyalty The Alert Loyalty Program allows you to support an end-to-end purchase-based loyalty solution. The purchase-based loyalty platform includes: A loyalty platform, hosted within Alert. APIs in the Alert platform, which let you: Send Alert receipts for customers purchases, indicating the loyalty. Retrieve customers loyalty points and activities, to display on your website. Update customers loyalty accounts when they redeem their loyalty points at one of your stores. You can create a purchase-based loyalty program for all customers who have a loyalty membership with you. The high-level workflow for a purchase-based loyalty program is as follows: 1 In CMS, you create a purchase-based loyalty program, and configure the following options: The relationship between purchase amounts and the loyalty points awarded to customers. For example, you can define a rule that for each $10 customers spend, they get 1 loyalty point. The period for which customers loyalty points are marked as pending. Typically, this period matches your product return policy, and ensures that customers can only use their loyalty points once the purchase is final. Once the period has concluded, the loyalty points are added to the customer s points balance. For social loyalty programs, the points that customers earn are added to their loyalty points balance immediately. 2 In your Alert-based app, your customers sign up for your loyalty program. 3 Customers make purchases at your stores. Depending on your business rules, some of these purchases are eligible for loyalty points. 8 Creating a loyalty program for your customers: Alert Loyalty 2014 MicroStrategy, Inc.

21 MicroStrategy Alert Developer Reference Getting Started with Alert 1 4 Your point-of-sale (POS) terminal sends Alert the receipt for the purchase using the Receipts API, and indicates the purchase amount that is eligible for loyalty points. For example, if a customer's purchase totals $100, of which $50 is eligible for your loyalty program, the receipt indicates that $50 is the amount eligible for calculating loyalty points. Customers can view their receipts in your Alert-based app, or through your website. You can send receipts to Alert for the following customers: Customers who track their loyalty memberships using your Alert-based app. Customers who track their loyalty memberships through your website. The API calls for the Receipts API is described in Creating and managing receipts: Receipts API, page Based on the rules you define in CMS, the Alert platform calculates the number of points and adds it to the customer s pending loyalty points. 6 If customers return items, your POS terminal creates a receipt for the return using the transaction ID for the original receipt. The receipt for the returned items indicates the amount that is to be deducted from the original purchase, as well as the amount for loyalty points to deduct. 7 When your customers log on to your website to track their loyalty information, you use Alert API calls to retrieve the following information about the customer s activities: Their current points balance, including their pending points. The API call to retrieve a customer s loyalty points is described in Retrieving a customer s loyalty points, page 178. Their activity history. The API call to retrieve a customer s loyalty activities is described in Retrieving a customer s loyalty activities, page When customers redeem their loyalty points at one of your stores, your POS terminal or website makes an API call to Alert, to mark the points as redeemed. The API call to mark a customer s points as redeemed is described in Redeeming a customer s loyalty points, page MicroStrategy, Inc. Creating a loyalty program for your customers: Alert Loyalty 9

22 1 Getting Started with Alert MicroStrategy Alert Developer Reference 10 Creating a loyalty program for your customers: Alert Loyalty 2014 MicroStrategy, Inc.

23 2 2.CUSTOMIZING AN ALERT APP Introduction The MicroStrategy Alert mobile app can be easily customized for your use. You can create a custom skin for the mobile app using your company s logo, text, and images. MicroStrategy then uses that skin to create a version of the app tailored to your needs. If required, you can make your app accessible to an international audience by providing MicroStrategy with translations for the text used in the app. For more information about any aspect of customizing the Alert app, including instructions, select from the following: Customization overview, page 12 Customizing the images in the app, page 17 Customizing the colors used in the app, page 28 Customizing the app s navigation menu, page 33 Customizing the app s Account page, page 48 Customizing the account creation parameters, page MicroStrategy, Inc. 11

24 2 Customizing an Alert App MicroStrategy Alert Developer Reference Customizing the app s Social page, page 59 Customizing the text in the app in ios, page 65 Customizing the text in the app in Android, page 71 Customizing the text sent from the app in ios, page 77 Customizing the text sent from the app in Android, page 81 Customizing messages sent from the app, page 84 Automatically customizable text: Macros, page 89 Adding a link to the app s Account page, page 92 Compiling your customized skin, page 95 Testing the customized skin for ios, page 96 Making your custom Alert-based app available, page 98 Customization overview To customize your Alert app, you change the text and images used in the app skin. You can download a sample skin from MicroStrategy, which contains all the images and text, and make your changes. Then you send the skin to MicroStrategy to create your app. For example, a retailer can use Alert to create a custom storefront app. Customers who have downloaded the app receive messages about sales and special items, tailored to their demographic information. While they are in the store, they can use their smartphone camera as a QR code scanner to retrieve information about items. For an overview of specific aspects of customizing your app, see the following: Common customizations, page 13 Prerequisites for customizing your app, page 13 High-level steps for customizing your app, page 14 The Alert skin bundle, page 15 Structure of an ios skin bundle, page Customization overview 2014 MicroStrategy, Inc.

25 MicroStrategy Alert Developer Reference Customizing an Alert App 2 Structure of an Android skin bundle, page 16 Common customizations Some common customizations that are made to the Alert app include: Changing the splash screen to an image specific to your company (see Customizing the images in the app, page 17) Changing the color scheme and icons to reflect your company s brand (see Customizing the colors used in the app, page 28 and Customizing the images in the app, page 17) Changing the notification text so that it is specific to your app (see Customizing the text sent from the app in ios, page 77 or Customizing the text sent from the app in Android, page 81) Customizing the items in the navigation menu so that they reflect your use cases (see Customizing the app s navigation menu, page 33) Changing the messages that users send from the app so that they link to your company s products (see Customizing messages sent from the app, page 84) Prerequisites for customizing your app You must have access to an ios or Android device that can install the Trela demo app. You should have a basic understanding of HTML and JavaScript Object Notation (JSON) files. For an introduction to the JSON file format, see the W3Schools introduction to JSON, at You must have access to a text editor that can save text files in UTF-8 encoding. To customize the images in the app, you must have access to an image editor that can create.png files. To customize the colors in the app, you must have a basic understanding of how to define colors as hexadecimal values. If you are using ios and you want to test your app skin on your ios device, you must have access to a web server MicroStrategy, Inc. Customization overview 13

26 2 Customizing an Alert App MicroStrategy Alert Developer Reference High-level steps for customizing your app The general workflow for customizing your Alert-based app is as follows: 1 Download the Trela demo app from the appropriate location for your mobile device: For ios devices: Download Trela from the Apple App Store For Android devices: Download Trela from Google Play 2 Explore the Trela app to identify the images, colors, or text that you want to customize. 3 Download a sample skin from the MicroStrategy support website. For information about the sample skin, including a download location, see The Alert skin bundle, page In the sample skin, add the images that you want to customize. For example, you may want to use your company s logo in the splash screen. For steps to customize images, see Customizing the images in the app, page Review and customize the colors that you want to edit. For example, you may want to change the colors of the app s navigation bars. For steps to customize colors, see Customizing the colors used in the app, page Review and customize the app s navigation menu, Account page, and Social page. For example, you may want to change the default name of the Loyalty Cards section to a term that fits with your branding. For steps to customize these screens, see Customizing the app s navigation menu, page 33, Customizing the app s Account page, page 48, Customizing the account creation parameters, page 56, and Customizing the app s Social page, page Review and customize the text in the app that you want to edit. For example, you may want to change the text that is displayed for the Loyalty Cards section. For steps to customize text, see Customizing the text in the app in ios, page 65, Customizing the text sent from the app in ios, page 77, and Adding a link to the app s Account page, page If your users will be sharing gifts and offers by , you may want to customize the messages that the app sends. For steps to customize the messages, see Customizing messages sent from the app, page Customization overview 2014 MicroStrategy, Inc.

27 MicroStrategy Alert Developer Reference Customizing an Alert App 2 9 Compile your modified version of the template skin. For steps to compile the skin, see Compiling your customized skin, page If you are using an ios app, install your custom skin on a device and test it. For steps to test the skin, see Testing the customized skin for ios, page Deliver the compiled skin to MicroStrategy. A MicroStrategy team creates a custom app using the skin you have customized. 12 Make your custom app available to your customers. For high-level steps to make your app available on the appropriate app store, see Making your custom Alert-based app available, page 98. The Alert skin bundle You can download an Alert skin from the MicroStrategy website, from one of the following locations: For ios devices, the skin can be downloaded from STrelaSkin.zip For Android devices, the skin can be downloaded from ndroidtrelaskin.zip An Alert skin is a compressed ZIP archive, containing a skin.bundle folder. The structure of the folder is different depending on the device. For ios devices, see Structure of an ios skin bundle, page 15. For Android devices, see Structure of an Android skin bundle, page 16. Structure of an ios skin bundle The ios skin.bundle file can be downloaded from STrelaSkin.zip MicroStrategy, Inc. Customization overview 15

28 2 Customizing an Alert App MicroStrategy Alert Developer Reference It contains the following items, as shown in the image below: en.lproj folder: Contains files with localization information. Localizable.strings file: Contains all the text used in the app. You can edit this file to change the text used in the app, or to translate the text into different languages. Resources folder: Contains additional files used by the skin. Images folder: Contains all the images used by the skin. skin.json file: Contains text that you can customize for the iphone, such as items in the app s navigation menu, and the colors that are used in the interface. skin-ipad.json file: Contains text that you can customize for the ipad, such as items in the app s navigation menu, and the colors that are used in the interface. text_templates.json file: Contains the messages that are sent to other users from the app, for example, when sharing an offer via . For the structure of an Android skin bundle, see Structure of an Android skin bundle, page 16. Structure of an Android skin bundle The Android skin.bundle file can be downloaded from oidtrelaskin.zip. 16 Customization overview 2014 MicroStrategy, Inc.

29 MicroStrategy Alert Developer Reference Customizing an Alert App 2 It contains the following items, as shown in the image below: Resources folder: Contains additional files used by the skin. Images folder: Contains all the images used by the skin. skin.json file: Contains text that you can customize, such as items in the app s navigation menu, and the colors that are used in the interface. strings.xml file: Contains all the text used in the app. You can edit this file to change the text used in the app, or to translate the text into different languages. To, download a sample strings.xml, click the following URL: ndroid_strings_sample.xml. For the structure of an ios skin bundle, see Structure of an ios skin bundle, page 15. Customizing the images in the app You can customize the images used in the Alert app. For example, you can change the splash screen and login page so that they display your company s logo, or use customized menu buttons. For detailed instructions on how to customize the images in the skin, see Steps to customize the images in the skin, page 18. For specific images to customize, see the following: For images that represent your brand, see Images used for branding, page 19. For images used for items, see Images used for content elements, page 21. For images used for navigation elements, such as menu buttons: On ios, see Images used for navigation elements in ios, page MicroStrategy, Inc. Customizing the images in the app 17

30 2 Customizing an Alert App MicroStrategy Alert Developer Reference On Android, see Images used for navigation elements in Android, page 25. For images used for navigation menu icons, on ios, see Images used for navigation menu icons in ios, page 26. Steps to customize the images in the skin The images used in your skin are contained in the \Images folder of skin.bundle. By default, the Images subfolder is empty, and the skin uses the app s built-in images. To download an archive containing all the images used in the app, select from the following links: For ios: kin/iosalertimages.zip For Android: kin/androidalertimages.zip Prerequisite To customize the images in your app, you need an image editor that can save images at a specified pixel size, in PNG format, with various properties such as transparency as specified for each image. To customize an image in the skin 1 Browse through the demo app, and use the following sections to identify the image in the app that you want to customize: For images that represent your brand, see Images used for branding, page 19. For images used for items, see Images used for content elements, page 21. For images used for navigation elements, such as menu buttons: On ios, see Images used for navigation elements in ios, page Customizing the images in the app 2014 MicroStrategy, Inc.

31 MicroStrategy Alert Developer Reference Customizing an Alert App 2 On Android, see Images used for navigation elements in Android, page 25. For images used for navigation menu icons, on ios, see Images used for navigation menu icons in ios, page Create a new image, in PNG format, with the specified height, width, and any additional properties. If you are developing an ios skin, then to take advantage of high-resolution screens on newer devices, MicroStrategy recommends that you create multiple versions of each image, described as follows: A standard-resolution image which is displayed on devices with low-resolution screens, such as older-generation iphone devices. A high-resolution image that is double the size of the standard-resolution image, to take advantage of high-resolution screens on some devices, such as the iphone 4 and 4s. The file name of the high-resolution image is the same as the standard-resolution image, with suffix. For example, if the standard-resolution image is example.png, the high-resolution image is example@2x.png. For some full-screen images, you must create an extended high-resolution version of the image to take advantage of the larger screen size of devices such as the iphone 5. The file name of the extended high-resolution version of the image is the same as the standard-resolution image, with an -568h@2x suffix. For example, if the standard-resolution image is example.png, the high-resolution image is example-568h@2x.png. 3 Save your images in the \Images folder of the sample skin, using the file name specified for the image. For any images that you do not customize, the default image is used. Images used for branding You can customize the images that represent your brand, such as the app s logo, the splash screen displayed when the app starts, and so on. The table below describes the images used for branding MicroStrategy, Inc. Customizing the images in the app 19

32 2 Customizing an Alert App MicroStrategy Alert Developer Reference For steps to customize these images, see Steps to customize the images in the skin, page 18. Description A large version of the app s logo, displayed on the login page for the app. Image to customize ios: logo_trela_splash.png Android: trela_logo.png Specifications (height x width, in pixels) ios standard resolution: 215 x 175 px ios high resolution (@2x suffix): 430 x 170 px Android: 460 x 110 px Note: The image background must be set to alpha transparent. The splash screen that is displayed when the app starts. This image should not contain the logo, as the logo is displayed with the login and connect buttons (as in the example logo image above). Note: To view the splash screen on an iphone during a test, you must also upload the images to your CMS account. For more information about testing the skin, see Testing the customized skin for ios, page 96. ios: defaultsplashimage.png Android: splash_screen_blank.png ios standard resolution: 320 x 460 px ios high resolution (@2x suffix): 640 x 920 px ios extended high resolution (-568h@2x suffix): 640 x 1096 px Android: 480 x 800 px 20 Customizing the images in the app 2014 MicroStrategy, Inc.

33 MicroStrategy Alert Developer Reference Customizing an Alert App 2 Description The default image displayed when users view their loyalty cards in the app. Special effects such as rounded corners and shadows are applied by the app. Image to customize image_loyalty.png Specifications (height x width, in pixels) ios standard resolution: 292 x 184 px ios high resolution (@2x suffix): 584 x 368 px Android: 584 x 386 px The app s icon. icon.png ios standard resolution: 57 x 57 px ios high resolution (@2x suffix): 114 x 114 px Android: 96 x 96 px Images used for content elements You can customize the images used for content within the app, such as the placeholder images displayed if users have no gift cards or receipts. The table below describes the images used within the app MicroStrategy, Inc. Customizing the images in the app 21

34 2 Customizing an Alert App MicroStrategy Alert Developer Reference For steps to customize these images, see Steps to customize the images in the skin, page 18. Description The placeholder image displayed when users have not added any gift cards. Image to customize icon_empty_giftcard.png Dimensions (height x width, in pixels) ios standard resolution: 139 x 139 px ios high resolution (@2x suffix): 278 x 278 px Android: 278 x 278 px Note: The image background must be set to alpha transparent. The placeholder image displayed when users have not added any loyalty cards. ios: icon_empty_loyaltycard.png Android: icon_empty_loyalty.png ios standard resolution: 139 x 139 px ios high resolution (@2x suffix): 278 x 278 px Android: 278 x 278 px Note: The image background must be set to alpha transparent. 22 Customizing the images in the app 2014 MicroStrategy, Inc.

35 MicroStrategy Alert Developer Reference Customizing an Alert App 2 Description The placeholder image displayed when a user s inbox is empty. Image to customize ios: Empty_inbox.png Android: icon_empty_inbox.png Dimensions (height x width, in pixels) ios standard resolution: 139 x 139 px ios high resolution (@2x suffix): 278 x 278 px Android: 278 x 278 px Note: The image background must be set to alpha transparent. The placeholder image displayed when users have no vouchers. icon_empty_vouchers.png ios standard resolution: 139 x 139 px ios high resolution (@2x suffix): 278 x 278 px Android: 278 x 278 px Note: The image background must be set to alpha transparent. The placeholder image displayed when users have no receipts. icon_empty_receipts.png ios standard resolution: 139 x 139 px ios high resolution (@2x suffix): 278 x 278 px Android: 278 x 278 px Note: The image background must be set to alpha transparent MicroStrategy, Inc. Customizing the images in the app 23

36 2 Customizing an Alert App MicroStrategy Alert Developer Reference Description (ios only) Highlights an offer in the user s inbox with a notification, for example, an offer that was received as a gift MicroStrategy recommends that the color of this icon be the same as the notification_color color, described in Customizing the colors used in the app, page 28. Note: In Android, this highlight can be changed using the brand_accent color code, as described in Customizing the colors used in the app, page 28. (ios only) Highlights an offer in the user s inbox, for example, a special deal on items. MicroStrategy recommends that the color of this icon be the same as the warning_color color, described in Customizing the colors used in the app, page 28. Note: In Android, this highlight can be changed using the brand_accent color code, as described in Customizing the colors used in the app, page 28. Image to customize ios: icon_gift_accent_2.png ios: icon_gift_accent_3.png Dimensions (height x width, in pixels) Standard resolution: 73 x 23 px High resolution (@2x suffix): 146 x 46 px Standard resolution: 73 x 23 px High resolution (@2x suffix): 146 x 46 px Images used for navigation elements in ios You can customize the images used for navigation items in the app, such as menu buttons. The table below describes the customizable images used for navigation. 24 Customizing the images in the app 2014 MicroStrategy, Inc.

37 MicroStrategy Alert Developer Reference Customizing an Alert App 2 For steps to customize these images, see Steps to customize the images in the skin, page 18. Description Image to customize Dimensions (height x width, in pixels) The app s Back button. icon_arrow_back.png Standard resolution: 44 x 33 px High resolution (@2x suffix): 88 x 66 px Images used for navigation elements in Android You can customize the images used for navigation items in the app, such as menu buttons. The table below describes the customizable images used for navigation. For steps to customize these images, see Steps to customize the images in the skin, page 18. Description The arrow for the app s Back button. Image to customize icon_arrow.png Dimensions (height x width, in pixels) 32 x 53 px The image used along with the app s Back button. icon_t.png 31 x 55 px 2014 MicroStrategy, Inc. Customizing the images in the app 25

38 2 Customizing an Alert App MicroStrategy Alert Developer Reference Images used for navigation menu icons in ios In ios, you can customize the images used for the navigation menu icons in the app. The table below describes the customizable images used for navigation menu icons. Changing the icon images does not change the background color for the icons. To set the background color for each image, in the skin, specify the icon_bg_color, as described in Customizing the app s navigation menu, page 33. MicroStrategy recommends that these images all be a consistent size and color, and use a consistent line weight. If the images are not white, make sure that the images contrast sufficiently with the background color you choose. For detailed instructions on how to customize the images in the skin, see Steps to customize the images in the skin, page 18. Description Image to customize Dimensions (height x width, in pixels) The icon for the Activity menu item. The icon for the More menu item. The icon for the Gift Card menu item. The icon for the Inbox menu item. icon_nav_activity.png icon_nav_more.png icon_nav_giftcard.png icon_nav_inbox.png Standard resolution: up to 25 x 25 px High resolution (@2x suffix): up to 50 x 50 px Note: The image must be saved as a transparent PNG with no background color. Standard resolution: up to 25 x 25 px High resolution (@2x suffix): up to 50 x 50 px Note: The image must be saved as a transparent PNG with no background color. Standard resolution: up to 25 x 25 px High resolution (@2x suffix): up to 50 x 50 px Note: The image must be saved as a transparent PNG with no background color. Standard resolution: up to 25 x 25 px High resolution (@2x suffix): up to 50 x 50 px Note: The image must be saved as a transparent PNG with no background color. 26 Customizing the images in the app 2014 MicroStrategy, Inc.