Mobile SDK Default UI

NOTE: If you want to use your own fully custom UI, you must disable the default UI, as it is on by default.

Customize the Default User Interface

You can modify the color, interface text, and images provided in the default interface. You can also choose to implement your own interface.

iOS

  1. To set various colors used by the default UI: [GlanceVisitor setDefaultUIColor: CircleViewColor color: UIColor.redColor];

  2. To override the default UI text and image resources, include resources with the same name within your own application bundle resources.

  3. To use the default UI, but supply a GlanceDefaultUIDelegate or your own terms and conditions URL: [GlanceVisitor defaultUI: YES delegate: myDelegate termsURL: @"https://www.example.com/terms"];. GlanceDefaultUIDelegate only provides notification for voice call events.

  4. To implement your own UI, use: [GlanceVisitor defaultUI: NO]; [GlanceVisitor setCustomViewerDelegate:self];.Your delegate must implement the GlanceCustomViewerDelegate protocol.

Android

  1. To set various colors used by the default UI, add them to your res/values/colors.xml file.

  2. To modify the UI text, update your application’s res/values/strings.xml file.

  3. To customize images, include resources with the same name within the res/drawable folder.

  4. To set the terms URL, use this method: Visitor.defaultUI(boolean enabled, String termsUrl). Alternatively contact your Glance representative to set the terms URL.

  5. To implement your own UI use: Visitor.defaultUI(false); Visitor.setCustomSessionViewId(R.id.my_glance_agent_viewer);.

Your custom view will most likely override onSizeChanged and dispatchDraw.

Default User Interface Details

Dialog Colors

the default dialog colors.

Session Key Colors

the default session key colors.

Agent Viewer Colors

the default agent viewer colors.

End Button Colors

The default end button colors.

Localization

To update the language you need to override values in the Localizable.strings file of your app.

iOS Values

"GLANCE_DEFAULT_UI_PRESENCE_DIALOG_TITLE" = "In-App Visual Call";
"GLANCE_DEFAULT_UI_PRESENCE_DIALOG_TEXT" = "Let an agent guide you?";
"GLANCE_DEFAULT_UI_PRESENCE_DIALOG_NO_BUTTON_TITLE" = "No";
"GLANCE_DEFAULT_UI_PRESENCE_DIALOG_YES_BUTTON_TITLE" = "Yes";
"GLANCE_DEFAULT_UI_START_DIALOG_TITLE" = "In-App Visual Call";
"GLANCE_DEFAULT_UI_START_DIALOG_SUBTITLE" = "You are about to start a phone call with Customer Service.";
"GLANCE_DEFAULT_UI_START_DIALOG_TITLE_AGENT" = "Your agent will be able to see your screen.";
"GLANCE_DEFAULT_UI_START_DIALOG_PHONE_TEXT" = "No need to go to your phone app";
"GLANCE_DEFAULT_UI_START_DIALOG_HEADSET_TEXT" = "Turn on the speaker or use your headphones";
"GLANCE_DEFAULT_UI_START_DIALOG_DRAW_TEXT" = "Your agent will guide you by drawing on your screen";
"GLANCE_DEFAULT_UI_START_DIALOG_VIDEO_TEXT" = "You'll see live video of your agent but the agent won't see you";
"GLANCE_DEFAULT_UI_START_DIALOG_CANCEL_BUTTON_TITLE" = "Cancel";
"GLANCE_DEFAULT_UI_START_DIALOG_ACCEPT_BUTTON_TITLE" = "Accept";
"GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_TEXT" = "You are about to start a video call with Customer Service.\n\nWhen you tap \"Start Your Video\", your phone camera and microphone will become active, and the Customer Service agent will see your video.";
"GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_CANCEL_BUTTON_TITLE" = "Cancel";
"GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_ACCEPT_BUTTON_TITLE" = "Start Your Video »";

Android Values

To update these fields, you need to override in the res/values/strings.xml file of your app.

<string name="visitor_dialog_header">In-App Visual Call</string>
<string name="visitor_dialog_main_text_1">You are about to start a phone call with Customer Service.</string>
<string name="visitor_dialog_main_text_2">Your agent will be able to see your screen.</string>
<string name="visitor_dialog_bullet_1">No need to go to your phone app</string>
<string name="visitor_dialog_bullet_2">Turn on the speakerphone or use your headphones</string>
<string name="visitor_dialog_bullet_3">Your agent will guide you by drawing on your screen</string>
<string name="visitor_dialog_bullet_4">You\'ll see live video of your agent but <b>the agent won\'t see you</b></string>
<string name="visitor_dialog_terms">By clicking <b>Accept</b>, you agree to our\n<u><font color='#177340'>Terms and Conditions</font></u> and will be connected to an agent.</string>
<string name="presence_dialog_header">In-App Visual Call</string>
<string name="presence_dialog_main_text">Let an agent guide you?</string>
<string name="presence_dialog_terms"><u>Terms and Conditions</u></string>
<string name="presence_dialog_terms_text">Allow the agent to view this app?</string>
<string name="presence_dialog_terms_text_video">Allow the agent to start video?</string>
<string name="GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_ACCEPT_BUTTON_TITLE">Start Your Video »</string>
<string name="GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_CANCEL_BUTTON_TITLE">Cancel</string>
<string name="GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_TEXT">You are about to start a video call with Customer Service.\n\nWhen you tap \"Start Your Video\", your phone camera and microphone will become active, and the Customer Service agent will see your video.</string>
<string name="video_dialog_terms">By tapping <b>Start Your Video</b>, you agree to our</string>
<string name="video_dialog_terms_link">Terms and Conditions</string>

By continuing to use the site, you agree to the use of cookies. Learn More