Customizing the UI

App Embed

Customizing the UI

The Zappar component provides a complete, fully-featured user interface for scanning and execution of AR experiences. The UI can be customized in a number of ways:

  • The color of the action bar can be changed
  • Action bar history button can be shown or hidden
  • Action bar favorite button can be shown or hidden

In each case the modifications are made by changing the parameters of an optional ZapparEmbedOptions object, like this:

@IBAction func goZappar(_ sender: Any) {

    let zapparEmbedOpt:ZapparEmbedOptions = ZapparEmbedOptions.default()
    zapparEmbedOpt.barColor =

    let zappar = ZapparEmbed.zapcodeViewController(withFinish: self, embedOptions: zapparEmbedOpt)
    self.present(zappar!, animated: true, completion: nil)

Changing the Bar Color

You can change the color of the action bar by modifying the options object like this:

zapparEmbedOpt.barColor =

You should always choose a dark color for the action bar so that there is good contrast with the white icons on its buttons.

Choosing the Bar Buttons

The action bar hosts buttons that allow the user to perform a number of useful functions. Some of the buttons on the bar are optional and can be shown or hidden.

History area button

This button opens an area where users can browse and launch zaps that they’ve recently scanned or marked as a favorite. It’s shown by default but can be hidden with the following:

zapparEmbedOpt.showHistoryButton = false

Favorite button

This button allows the user to toggle whether the current zap should be shown in the favorites section. This button is enabled by default and only appears when the user is in a zap experience and not during scanning mode. It can be disabled completely using the following:

zapparEmbedOpt.showFavoriteButton = false

Next Steps

Open in new window