Change font and button corner radius as per native app specifications

[PrabhjotCngh]

I want to customize header and body label fonts and also I want to customise button appearance for in app messages.

How can I do so ?

Please help me as I am stuck here from quite a long now.

Thanks

[lowip]

Hi @PrabhjotCngh

In order to customize an in-app message, the easiest approach is by providing a custom view controller for the in-app message display.

To do so, create first a custom view controller class for the desired in-app message to customize:

// We subclass the existing ABKInAppMessageModalViewController to customize it
class CustomModalViewController: ABKInAppMessageModalViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let fontName = "MarkerFelt-Thin"
    inAppMessageHeaderLabel?.font = UIFont(name: fontName, size: 18)
    inAppMessageMessageLabel?.font = UIFont(name: fontName, size: 15)
    leftInAppMessageButton?.titleLabel?.font = UIFont(name: fontName, size: 13)
    rightInAppMessageButton?.titleLabel?.font = UIFont(name: fontName, size: 13)
  }

}

Then you must register an in-app message ui delegate:

// After initializing the SDK (e.g. in application(_:didFinishLaunchingWithOptions:))
Appboy.sharedInstance()?.inAppMessageController.inAppMessageUIController?.setInAppMessageUIDelegate?(self)

Finally, make your delegate conform to the ABKInAppMessageUIDelegate protocol:

extension AppDelegate: ABKInAppMessageUIDelegate {

  func inAppMessageViewControllerWith(_ inAppMessage: ABKInAppMessage) -> ABKInAppMessageViewController {
    switch inAppMessage {
    case is ABKInAppMessageSlideup:
      return ABKInAppMessageSlideupViewController(inAppMessage: inAppMessage)
    case is ABKInAppMessageModal:
      // Return a custom modal view controller for modal in-app messages
      return CustomModalViewController(inAppMessage: inAppMessage)
    case is ABKInAppMessageFull:
      return ABKInAppMessageFullViewController(inAppMessage: inAppMessage)
    case is ABKInAppMessageHTMLFull:
      return ABKInAppMessageHTMLFullViewController(inAppMessage: inAppMessage)
    case is ABKInAppMessageHTML:
      return ABKInAppMessageHTMLViewController(inAppMessage: inAppMessage)
    default:
      // This is safe to use in current versions of the SDK as the switch
      // statement already handle all cases supported by the SDK. Next SDK release will allow
      // returning nil.
      fatalError()
    }
  }

}

Let me know if that answers your question.

[PrabhjotCngh]

Hi @lowip

Thanks for reverting back.

Tried this way but its not working. Still getting native In app message model instead of custom created.

Below is my code for reference. Could you please check if I am doing anything wrong ?

import UIKit import Appboy_iOS_SDK

class BrazeCustomViewController: ABKInAppMessageModalViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    let fontName = "MarkerFelt-Thin"
    inAppMessageHeaderLabel?.font = UIFont(name: fontName, size: 34)
    inAppMessageMessageLabel?.font = UIFont(name: fontName, size: 10)
    leftInAppMessageButton?.titleLabel?.font = UIFont(name: fontName, size: 22)
    rightInAppMessageButton?.titleLabel?.font = UIFont(name: fontName, size: 14)
  }

}

//Calling in didFinishLaunchingWithOption static func inititalizeBraze(application: UIApplication, launchOptions: [UIApplication.LaunchOptionsKey: Any]?) {

    Appboy.start(withApiKey: "", in: application, withLaunchOptions: launchOptions, withAppboyOptions: [ABKEndpointKey : Config.Braze.endpoint])
    Appboy.sharedInstance()?.inAppMessageController.inAppMessageUIController?.setInAppMessageUIDelegate?(self)
}

extension AppDelegate: ABKInAppMessageUIDelegate {

func inAppMessageViewControllerWith(_ inAppMessage: ABKInAppMessage) -> ABKInAppMessageViewController {

switch inAppMessage {
case is ABKInAppMessageSlideup:
  return ABKInAppMessageSlideupViewController(inAppMessage: inAppMessage)
case is ABKInAppMessageModal:
  // Return a custom modal view controller for modal in-app messages
  return BrazeCustomViewController(inAppMessage: inAppMessage)
case is ABKInAppMessageFull:
    return BrazeCustomViewController(inAppMessage: inAppMessage)
case is ABKInAppMessageHTMLFull:
  return ABKInAppMessageHTMLFullViewController(inAppMessage: inAppMessage)
case is ABKInAppMessageHTML:
  return ABKInAppMessageHTMLViewController(inAppMessage: inAppMessage)
default:
  // This is safe to use in current versions of the SDK as the switch
  // statement already handle all cases supported by the SDK. Next SDK release will allow
  // returning nil.
  fatalError()
}

}

}

[PrabhjotCngh]

@lowip Could you please look into this as it is very important for me

Thanks

[hokstuff]

Hi @PrabhjotCngh,

The best way to help us debug this issue would be through our support channels - would you be able to email support@braze.com with the info above as well as try a few things:

• Can you add in log statements in your ABKInAppMessageUIDelegate to ensure that the expected code is being called?
• If you use the View Hierarchy tool in Xcode, are you able to confirm that your Custom view is the one being shown?
• Can you attach your AppDelegate and any of your in-app message code that deals with displaying your custom view to the email? This will help us look into exactly what is happening.

Thanks for understanding, since going through Support will be the most straightforward way to debug specific issues like this!

[hokstuff]

I'm closing this thread out due to inactivity. If you believe it was done in error, feel free to comment or contact support@braze.com. Thanks!