search

Appboy / appboy-ios-sdk

Public repo for the Braze iOS SDK
https://www.braze.com
Other
166 stars 140 forks source link

iOS SDK - Customize the appearance of In-App messages #73

Closed jazz-mobility closed 8 years ago

jazz-mobility commented 8 years ago

Hello, I want to totally customize the appearance of In-App messages in iOS as well as Android, is there any way where I can provide my custom view to controller or any other way where i can change each control present in the slide-up, modal and full screen in app messages ?

Another very important question is, are those predefined messages are native components or it is HTML ? A quick answer will be helpful as it is very crucial for over marketing campaigns.

sen-lu commented 8 years ago

Hi @jazz-mobility,

Instructions for building custom view controllers and otherwise customizing in-app message display can be found on our technical documentation. For both iOS and Android, Appboy offers multiple levels of in-app message customization, including providing Appboy with your own custom view controllers.

iOS Documentation - Advanced In-App Message Customization Options

Android Documentation - In-App Message Customization

Specifically, here are the sections on providing custom view controllers for iOS and Android. Additional methods of in-app message customization are also described in detail in our technical documentation.

Regarding your other question, Appboy's slide-up, modal and full-screen in-app messages are native components. In addition, we also provide the ability to create and send custom HTML in-app messages through our dashboard.

Please let us know if you have any other questions.

Best, Tiff

jazz-mobility commented 8 years ago

Hello Tiff,

Thanks for quick reply, as I can see from the documentation, I still need to ABKInAppMessageSlideup, I want to replace it completely. I have few other questions you can help me with.

How can i detect in beforeInAppMessageDisplayed delegate what kind of IAM it is, e.g. slidup, modal, Fullscreen. How can I get the complete data of a view displayed, I can see the header and buttons are private properties of the ABKInAppMessage class. *How can I add my own close button, change corner radius, position modal alert ?

Basically I want the full control of UI customization of in-app messages.

sen-lu commented 8 years ago

Hi @jazz-mobility,

Please let us know if this satisfies your use-case, and if you have any other questions.

Best, Tiff

jazz-mobility commented 8 years ago

Thanks, This is helpful. Other problem I am facing is on default slide up messages, when i am changing the rotation then it is updating the position after the orientation change, which looks very ugly. I am using bottom position for slide up messages.

Wenzhi commented 8 years ago

Hi @jazz-mobility,

If you want to display in-app messages only in portrait, you can set the supportedOrientationMasks and supportedOrientations properties in class ABKInAppMessageController. The code would be like:

[Appboy sharedInstance]. inAppMessageController.supportedOrientationMasks = UIInterfaceOrientationMaskPortrait;

Thanks, Wenzhi

jazz-mobility commented 8 years ago

I want to support both orientations, but problem is message view is changing the position after the orientation change, which looks very weird. I am attaching the screenshot.

jazz-mobility commented 8 years ago

This is while changing the orientation from landscape to portrait.

Wenzhi commented 8 years ago

Thanks for reporting the issue! This looks weird, and we are investigating it right now. Could you provide the following information:

Thanks, Wenzhi

jazz-mobility commented 8 years ago

-> What version of Appboy SDK are you using?

Wenzhi commented 8 years ago

Hey @jazz-mobility,

Thanks for the information!

It seems that the default in-app message isn't working correctly in your app, but I'm having trouble reproducing that behavior. Given that the related code has been unchanged for some time, that the functionality is failing drastically and we’ve had no other reports of this issue, I suspect something unique in your application is triggering this.

As such, could you send your project or a sample project which reproduces the issue to wenzhi@appboy.com?

Thanks, Wenzhi

jazz-mobility commented 8 years ago

Hello @Wenzhi,

I think the reason for this issue could be breaking constraints on slide up message.

Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( NSLayoutConstraint:0x1487392b0 '_UITemporaryLayoutHeight' V:[ABKInAppMessageView:0x14aeb3290(70)] NSLayoutConstraint:0x14aeb5470 'UIView-Encapsulated-Layout-Height' V:[ABKInAppMessageView:0x14aeb3290(77.5)] )

Will attempt to recover by breaking constraint NSLayoutConstraint:0x14aeb5470 'UIView-Encapsulated-Layout-Height' V:[ABKInAppMessageView:0x14aeb3290(77.5)]

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

jazz-mobility commented 8 years ago

Also, How can I update the font of Slide up message ?

Wenzhi commented 8 years ago

Hey @jazz-mobility,

To customize font of Slideup message, you can use NUI framework and follow this documentation.

For the position issue, it might have to do with the constraint conflict you see, although we don't rely on Auto Layout for the slideups’ position. We actually calculate the position and set the frame directly. I tried to create Slideups with your sample message and icon across different devices on both iPhone and iPad, and I still cannot reproduce the constraint conflict and the issue.

Would it be possible for you to share that sample app with us? Also, if you could reach out to me at wenzhi@appboy.com we'd like to inquire more about your setup/environment and we can avoid publishing any sensitive info if we chat over email.

Thanks Wenzhi

jazz-mobility commented 8 years ago

Hi @Wenzhi,

Just figured out that we are using our own custom window. Can you please provide a solution when app is using custom windows.

Wenzhi commented 8 years ago

Hey @jazz-mobility,

If you are already using custom windows, I'd recommend implementing and displaying the in-app message yourself.

You can implement the in-app message delegate method beforeInAppMessageDisplayed:withKeyboardIsUp:. The method will be called when there is an in-app message ready to about to display. Grab the in-app message data in the method and return ABKDiscardInAppMessage, and then you can display your custom in-app message view with the in-app message data.

As @tiffanylu mentioned above, please keep the in-app message object around and don't forget to call the analytics related methods like logInAppMessageImpression, logInAppMessageClicked and logInAppMessageClickedWithButtonID:.

Please let me know if you have any questions or issues about handling customized in-app messages.

Thanks, Wenzhi

Wenzhi commented 8 years ago

Hey @jazz-mobility,

Does my previous reply answer your question? Do you have any other issues or questions?

If you are fine with the answers, please let us know so we can close the issue. :)

Thanks, Wenzhi

jazz-mobility commented 8 years ago

Thanks @Wenzhi Yes i understood how to provide the custom UI to App boy. We ar enot using this approach as of now. I tried the custom HTML solution and from last couple of days it stopped showing the image which I have in zip folder. It was working fine initially, but once i updated the segment for less users, HTML message is not showing the image. <a href="http://google.com"><img src="home_icon.png" width="44" height="44" id="homeImage"></a>

georgiagh1991 commented 8 years ago

Hi @jazz-mobility

I've sent you an email so we can assist further

Many thanks

Georgia