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.

  1. 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] (https://developer.android.com/reference/android/view/ViewGroup.html#dispatchDraw(android.graphics.Canvas)).

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.

Strings

"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_PRESENCE_DIALOG_TERMS_TEXT" = "<b><u>Terms and Conditions</u></b>";
"GLANCE_DEFAULT_UI_PRESENCE_DIALOG_TEXT_VIDEO" = "Allow the agent to start video?";  "GLANCE_NON_DEFAULT_UI_PRESENCE_DIALOG_TITLE" = "Allow the agent to view this app?"; "GLANCE_NON_DEFAULT_UI_PRESENCE_DIALOG_NO_BUTTON_TITLE" = "No";
"GLANCE_NON_DEFAULT_UI_PRESENCE_DIALOG_YES_BUTTON_TITLE" = "Yes"; "GLANCE_NON_DEFAULT_UI_PRESENCE_DIALOG_SHOW_TERMS_BUTTON_TITLE" = "Show Terms";
"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_DEFAULT_UI_START_DIALOG_TERMS_TEXT" = "By clicking <b>Accept</b>, you agree to our<br/><b><u>Terms and Conditions</u></b> and will be connected to an agent.";
"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 »"; "GLANCE_VIDEO_DEFAULT_UI_START_DIALOG_TERMS_TEXT" = "By tapping <b>Start Your Video</b>, you agree to our<br/><b><u>Terms and Conditions</u></b>";
"GLANCE_VIDEO_DEFAULT_UI_IN_QUEUE_TEXT" = "In Queue";
"GLANCE_KEYBOARD_MASK_LABEL" = "Keyboard is showing";
"GLANCE_BACKGROUND_SUSPEND_MASK_LABEL" = "The session has been temporarily suspended. The visitor may have closed the app. Waiting for the other side to reconnect.";
"GLANCE_BACKGROUND_PAUSE_MASK_LABEL" = "Screen not being shown...";
"GLANCE_DEFAULT_UI_AGENT_CODE_TEXT" = "Please give the agent this code:";
"GLANCE_DEFAULT_UI_IN_QUEUE_TEXT" = "In Queue";
"GLANCE_DEFAULT_UI_CANCEL_TEXT" = "Cancel";
"GLANCE_DEFAULT_UI_VISITOR_END_DIALOG_TITLE" = "Are you sure?";
"GLANCE_DEFAULT_UI_VISITOR_END_DIALOG_MESSAGE" = "This will end the Visual Call."; "GLANCE_DEFAULT_UI_VISITOR_END_DIALOG_END_BUTTON" = "End Call";
"GLANCE_DEFAULT_UI_VISITOR_END_DIALOG_CANCEL_BUTTON" = "Cancel";

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