Create and Configure Glad App Mobile (iOS/Android)

Create Glad App to embed in your iOS or Android mobile app, allowing app users to chat with your Agents. Once created, you can edit the Glad App used in your mobile app to adjust the styling and other functional configurations.

Before you start #

The setup for Glad App on mobile apps consists of multiple steps. Before configuring Glad App for iOS or Android, we recommend that you review the following:

• Get to know what Glad App is.
• The process for creating Glad App to use in a mobile app is the same as creating Glad App to use on your website. If you would like to implement notifications, you will need to follow the instructions below and work with Gladly Support to upload and register your certificates.
• There are fewer configuration options for Glad App used on mobile apps than on a website.
• You can find iOS  and Android  mobile SDKs on our developer guide .
• Please note that the Glad App mobile SDK does not support Quick Actions, Display Rules, or Proactive Chat.
• If you want to give Customers specific options — by way of buttons — to select what they need help with, consider using Quick Reply.

Create Glad App for mobile app #

1. Click on the top left corner of the screen.
2. Click Settings.
3. Under the Channels category, click Glad App. The Glad App page will show you a list of Glad Apps you currently have.
4. Click Create Glad App.
5. From the New Glad App prompt, enter the name of your new Glad App. You’ll see prepended. Enter the name of your new Glad App after the “–.” The name you use should help you identify how or where the Glad App is being used. For example, gladly.com.com-mobile-ios.
   • Special characters are not supported and do not add space between characters.
   • This is the same name that identifies the Glad App on the Entry Points page.
6. Click Create. This will immediately take you to the configuration page.
7. From the Glad App configuration page, check Enable Automation Services for Glad App if you need to allow third-party automation partners to create automation flows in Glad App and initially send chat requests to an automation partner instead of an Inbox. If activating, click Yes, proceed on the confirmation modal.
   • Note – The third-party automation provider is responsible for coordinating the handoff to Gladly using the Automation API if their automation cannot solve an issue. Unless you’re working with an automation partner, leave this box unchecked.
     • Leave Enable Search and Quick Actions unchecked and do not enter anything for Display Rules (these features are not yet supported for the iOS and Android SDK) if you’re not using an automation.
8. Click Save.

Embed Gladly Glad App on your App #

Visit developer.gladly.com  for mobile SDK information to set up Glad App on your app.

• iOS
• Android

Note: Your “appId” can be found in the Settings > Glad App page in the Embed Name column.

Optional: Set up notifications #

Notifications allow you to utilize the Glad App SDK to notify the Customer when they’ve minimized your app on new messages they’ve received.

Implement notifications #

If you’re implementing notifications for Glad App on your app, open a new P4 request with Gladly Support and provide the information below.

iOS

Send Gladly Support your .p12 cert (signed by Apple). You must also send your application bundle ID and the .p12 cert password because the .p12 cert is encrypted. We recommend sending the password through a secure medium, like https://onetimesecret.com/ .

• Gladly requires one cert and bundle ID per app.
• A Glad App can only have one iOS certificate attached to it.

It can take up to three business days to process APN service requests.

Android

Send Gladly Support the output of the following instructions:

1. In the Firebase console, open Settings > Service Accounts .
2. Click Generate New Private Key, then confirm by clicking Generate Key. We recommend sending the password through a secure medium, like https://onetimesecret.com/ .
   • Gladly requires one JSON file per app.
   • One Glad App can only have one Android cert attached to it.

Gladly Support will notify you once the installation is complete. In the meantime, you may continue configuring, styling, and testing Glad App without notifications.

Configure and style Glad App #

To configure your Glad App for your mobile app, hover over the Glad App you created, click, then click Configure. There are three sections you’ll need to configure:

1. Configuration – Administrative actions such as when to display Glad App, what Quick Actions will be used, Glad App Hours to control the availability of Glad App during business hours, and others.
2. Style – Configure the look and feel of Glad App, where you can change things like border style, radius, color, and other design elements.
3. Text – Customize the text that will show up on Glad App, including the header, input buttons, and more.

Configuration #

Self-Service #

• Enable Automation Services for Glad App – When the checkbox is selected, Gladly Sidekick and 3rd party automation services will have access to this Glad App for the purpose of communication and routing. If activating, click Yes, proceed on the confirmation modal.
  • Note – The third-party automation provider is responsible for coordinating the handoff to Gladly using the Automation API if their automation cannot solve an issue. Unless you’re working with an automation partner, leave this box unchecked.
• Enable Search and Quick Actions – If checked, Customers can search Public Answers, view Quick Actions, and see your chat option if within Glad App hours. If the box is unchecked, Customers can only chat during normal operating hours or if the day is not marked as Closed in the Glad App Hours settings. Otherwise, Customers will see the Chat Unavailable Message text.

• Note – This box must be checked to allow the use of Audiences and to select the language used to search Answers through Glad App.

Display Rules #

Option to allow Glad App to appear on all web pages or no pages.

• If Display Glad App on = All Pages, Glad App appears on all web pages unless an exception is added. It’s important to note that a Proactive Chat Campaign can override the Display Rules.
  • If adding an Exception, When a page = Contains, Exact, or Regex, enter the URL parameter to match the Condition. 

• If Display Glad App on = No Pages, Glad App will not appear on any webpage unless:
  • A Proactive Chat Campaign is triggered, which overrides the Display Rules.
  • Exceptions can still be added so you can still display Glad App on specific web pages but hide it everywhere else.

Glad App Hours #

Control when Glad App is active on your site. Please select the correct time zone. (Gladly Recommendation – Provide an alternate way for Customers to contact you during non-business hours.)

• Timezone – Select the timezone Glad App should follow.
• Hours – Enter the hours when Glad App will be active on your website. If you are closed on a particular day, check the Closed checkbox.
• Add Time Range – Click this option to enter different time ranges you want Glad App available. For example, if your team works from 6 AM to 6 PM, but you wish to hide Glad App from your website to stop chat requests from 12 PM to 1 PM during your team’s lunch hour, this is possible with the time range setting.
  • If “Enable Search and Quick Actions” box is checked, your FAQs will remain accessible, but chat will show your “chat is unavailable” message if outside Glad App active hours.
  • If “Enable Search and Quick Actions” box is not checked, and if a day is marked Closed or is outside Glad App active hours, the Chat Unavailable Message text will appear for Customers attempting to chat in since Agents are not working.

Quick Actions #

This section only appears if “Enable Search and Quick Actions” box is checked. Quick Actions consist of four required Actions that appear on Glad App. Think of Quick Actions like quick links that point to an external link or Public Answer. 

• Language¹ – Select the language the Help Center will use to search Public Answers.
• Audience¹ – Select the audience Glad App will use to search Public Answers. Selecting “none” allows the searching of all Public Answers not linked to an Audience.
• Quick Action Configuration (Four required actions)

• [A] Name – Enter a name for each action.
• [B] Answer/Website URL – Select whether each action will point to a Public Answer to an external URL/webpage.
• [C] Answer or Website URL Value – Insert the value based on [B] selection. (Answer/Website URL).
  • Answer – If an Answer is selected on [B], select the Public Answer from the list. Note that if an Audience is selected, only Answers linked to the selected Audience are available.
  • Website URL – If Website URL is selected on [B], enter the URL of the page you want to redirect Customers to.
• [D] View Answer – If [B] shows Answer, click View Answer to view the Answer on the Answers admin page.

Buttons #

Option to display an icon or button (with text) when Glad App is minimized.

• Icon – Uses an icon to display Glad App on a webpage.
• Text – Uses a button to display Glad App on a webpage. If selected, enter the text you want to show on the button.
  • Note – Regardless of your selection — Icon or Text — after a Customer starts a chat or clicks on a Quick Action, the icon becomes the default state when Glad App is minimized. To override this behavior, create a custom minimized button on your website, requiring some front-end site resources for HTML & CSS styling.

• Close Button – Choose if you want the close button to be signified by an “X” or a “Dash.”
  • This setting also applies to Proactive Chat. The close icon will appear when the visitor hovers over the greeting.

Style #

Placement #

Choose a left or right placement where Glad App appears on your website.

• Z-Index – Adjusts the stack order of elements (positioning of the Glad App icon on the page), which applies when Glad App is minimized. Start with “147483000” and adjust as needed.
• Powered By Gladly – Choose to allow the “Powered by Gladly” text to appear on Glad App.
  • This setting is activated by default. (the box is checked)
  • When clicked, the user is taken to gladly.com .
• Privacy Policy Disclaimer – Display a privacy policy statement that Customers accept when starting a chat session.
  • This setting is deactivated by default (the box is not checked). 
  • Check the box to activate the setting and enter your Privacy Policy statement. For example, “By using chat, you accept our <company name> Privacy Policy.” Keep the disclaimer concise and within the 140-character limit.
  • Link back to your company’s Privacy Policy page by highlighting the text and inserting the link.

• Drop Shadow – Choose to use (On) or not use (Off) drop shadows around Glad App.
• Border Width – Choose Glad App’s border width (1px to 3px).
• Border Color – If you have a border width selected, enter a hex color code to change the border color.
  • This option is hidden if border width shows None.
• Border Radius – Choose Glad App’s border radius (none, small, large).

Colors #

Select the color elements of Glad App to match your company brand/style.

• Agents Chat Bubble – Enter the hex color code for the color you want to indicate the Agents’ replies.
• Customer Chat Bubble – Enter the hex color code for the color you want to indicate your Customers’ replies.
• Glad App Chat Button – Enter the hex color code for the color you want to indicate your chat launcher.
• Alert Color – Enter the hex color code for the color to indicate when a live chat is minimized and there is an unread message.
• Minimized Chat Icon Color – Enter the hex color code for the color you want to use when the icon is minimized.
• Submit Arrow Color – Enter the hex color code for the color you want to use for the submit arrow icon.
• Enable Attachments – Allow Chat Customers to upload and attach files.
  • This setting is activated by default (the box is checked). 
  • Supports common files such as PNG, PDF, XLSX, CSV, TXT, MOV, and JPG.

Text #

Glad App fonts #

• Fonts 1 and 2 – Enter the font you want to use. This should be the same font used you website’s CSS. (e.g., Brandon Text, Avenir Next, etc.)
  • Font 1 – Applied to the header text and the chat launcher button.
  • Font 2 – Applied to the Quick Actions, Quick Reply, order status, chat bubble, and input texts.

Chat Unavailable Message #

Enter the message you want to display outside Glad App active hours. or when chat is unavailable. The message can be written in plain text or styled using HTML. You can also embed a web form.

Self-Service & Chat #

Configure Glad App’s self-service¹ screen.

• Header – Enter the text you want to appear on the top part of Glad App.
• Back Button Text – Enter the text you want to use to signify a “back” action.
• Search Placeholder Text – Enter a hint guiding Customres how to use search.
• Active Chat Header – Enter the header text you want to use during a live chat.
• Chat Input Button – Enter the text to use to start a chat.
• Chat Input When Button Is Unavailable – Enter a text to use when chat is not available.
• Chat Input Placeholder – Enter a help text for the chat field.

Greeting #

Configure the messages that Customers see before chatting with an Agent. (Gladly Recommendation – Consider including a text stating that emails are used for communication purposes only and not for marketing purposes.)

• Onboarding – If activated, you can collect the Customer’s name and email address before a chat session starts. This information is used to locate an existing Profile and any past Conversations. If not activated, Customers are not identified when starting a chat (not recommended).

• Prompt Order – If Onboarding is activated, select the order you want identifying information to be presented to Customers. (e.g., NAME > EMAIL, or EMAIL > NAME.) This information is used to identify and locate the Customer Profile (if they’re an existing Customer) or create a new Customer Profile with the name and email address.

Onboarding activated #

• First Message – Enter a greeting that also asks for their email address. For example, “Thank you for contacting us. What’s your email? We’ll use your email to find your profile and any past conversations you’ve had with us — not to spam you.”
  • Getting the email address helps identify the Customer in Gladly and pull up their Profile if they are an existing Customer. Otherwise, a new Customer Profile is created.
• Second Message – Enter a message that also asks for the name. For example, “Thanks! Can we get your name?”
  • This information is also passed to the Customer Profile.
• Third Message – Enter a message asking how you can help them. For example, “Thanks <CUSTOMERNAME>! How can we help?” The <CUSTOMERNAME> variable automatically inserts the Customer name.
  • If using Proactive Chat and onboarding is activated for a Campaign, the Third Message is replaced by the Campaign’s Action greeting.
• How Would You Like the Customer to Reply? – Customers can reply to the Third Message by typing a message (Type A Message) or selecting a reply by clicking buttons (Quick Reply Button).

• If Type A Message is selected, Customers type a string of text to reply to the Third Message with a question like “How we can help?” The Customer’s reply is taken verbatim and is what the Agent sees when the Customer is routed.
• If Select a Quick Reply Button is selected, you can configure specific options by way of buttons as input to reply to the Third Message.

• Button Label – Enter the button label with text (e.g., Refunds) representing an option.
• Button ID –  Used to identify the button via API  or by an automation partner. It can be alphanumeric or text, or numbers. We suggest using an ID that makes the button easily identifiable.
• + Add Button – Click to add more buttons as a Quick Reply.

• Fourth Message – You can activate/deactivate a message to let a Customer know you have the information you need to start helping them once their request is routed to an Agent upon typing a message or clicking a button. For example, “Got it! Someone will be with you shortly.”
  • If the box is unchecked, no additional message is sent to the Customer after they reply to the Third Message and until the request is routed to an Agent and they send a response.
  • If using Proactive Chat and Onboarding is activated for a Campaign, the Fourth Message may be redundant depending on how generic the Campaign’s greeting is. 

Onboarding not activated (not recommended) #

• First Message – Enter a greeting. Something like “Thank you for contacting us. How can we help you?”
  • This allows you to greet the Customer without asking for their name and email address in the beginning. Remember that you’ll still need a Customer’s email address to find their Profile in Gladly.
• How Would You Like the Customer to Reply? – Customers can reply to the Third Message by typing a message (Type A Message) or selecting a reply by clicking buttons (Quick Reply Button).
  • If Type A Message is selected, Customers type a string of text to reply to the Third Message with a question like “How we can help?” The Customer’s reply is taken verbatim and is what the Agent sees when the Customer is routed.
  • If Quick Reply Button is selected, you can configure specific options using buttons as input.

• Button Label – Enter the button label with text (e.g., Refunds) representing an option.
• Button ID –  Used to identify the button via API  or by an automation partner. It can be alphanumeric, text, or numbers. We suggest using an ID that makes the button easily identifiable.
• + Add Button – Add more buttons.

• Second Message – You can activate/deactivate a message to let a Customer know you have the information you need to start helping them once their request is routed to an Agent upon typing a message or clicking a button. For example, “Got it! Someone will be with you shortly.”
  • If Onboarding is activated, you must enter a Second Message.
  • If Onboarding is not activated, check/uncheck the Second Message. If selected, enter a message as a response to a reply from the First Message.

End chat #

• End Chat – Enter the text shown when the chat is ended.
  • Chat Ended By Agent – Enter the text you want Customers to see when a chat is ended by an the Agent.
  • Chat Ended By Expiration – Enter the text you want Customers to see if a chat session times out because the Customer did not reply within 24 hours.
  • Chat Ended By No Reply – Enter the text you want to use if a Customer stops responding.
  • Chat Ended By a New Active Chat – Enter the text you want Customers to see if Glad App notices a duplicate chat session from the same Customer but on a different device/browser.

Hover text #

• Hover Text – Configure the hover text for specific areas of Glad App.
  • Close Icon Hover Text –Enter the text you want to use when Customers hover over the close icon.
  • Send Icon Hover Text – Enter the text you want to use when Customers hover over the send icon.
  • Minimized Chat Icon Hover Text – Enter the text you want to use when Customers hover over the Glad App icon.
  • Attachment Icon Hover Text – Enter the text you want to use when Customers hover over the attachment icon.

Click Save and you’ll be returned to the Glad App page. It can take up to five minutes for updates to appear.

Next, go to the Entry Points settings page and link Glad App to an Inbox. This allows you to direct chats from Glad App to a specific Inbox.

Link Glad App to an Inbox #

1. On the Settings page, under the Orchestration category, click Entry Points.
2. Hover over Chat and click to open the Chat Channel’s Entry Point settings.
3. The Inbox selected in the default Inbox field is where all Glad App chats will be routed. You can stop here if this is the Inbox you want to use to receive chats from your app. You can add an exception if you want chats from your mobile app to go to a different Inbox.
4. Click + Add exception if the Glad App in question won’t use the Chat Channel’s default Inbox or Entry Point SLA.
   • Entry Point – Select the Entry Point you want to exclude from using the chat’s default Inbox. This will be the name of the Glad App you created for the mobile app.
   • Inbox – Select the Inbox you want incoming chat requests from the mobile app to queue in instead of the default Inbox.
   • Entry Point SLA (minutes) – Leave this field blank if you want to use the selected Inbox’s SLA. Otherwise, entering an SLA here trumps the Inbox SLA.
     • You can use fractional minutes. For example, 0.66 is 40 seconds.
     • You can’t enter “0” or use the “-” (minus) symbol.
5. Click Save.

Next, test Glad App on your app to ensure chats are received. Do this before your updated app build is released to the App Store.

Test and go live with Glad App on your app #

After you include Glad App in your app, ensure you test the following:

1. Open Glad App in your app and check that the styling matches the configuration.
2. Test the Glad App configurations, such as Glad App Hours settings, and ensure Glad App is not available outside your normal operating hours.
3. Request a chat from your app and make sure it routes to the correct Inbox.
4. Confirm that chat messages from the Agent side appear on your app.
5. If using notifications, trigger notifications to make sure they work.

Once testing is complete, release your updated chat build to the app store to go live with Glad App in your mobile app.

Glad App Updates #

Once Glad App is on your mobile app, and you make additional changes to your Glad App configuration (e.g., colors, new text, placement, etc.), changes will take ~10 minutes to appear. 

• ¹Appears if Glad App If “Enable Search and Quick Actions” box is checked.
• ²Appears if “Enable Search and Quick Actions” is not checked.