[Feature]: Add sample project with custom UI

[CorentinRobertSmood]

What problem are you facing?

Could you add a sample project with an implementation from scratch without div feed

Workarounds

Create a documentation or sample project with step by step to implement sdk custom view

Ideal Solution

No response

Other Information

No response

[wesleyorbin]

@CorentinRobertSmood I've filed a ticket internally to do this. In general though, you'll use braze.subscribeToInAppMessage and then use the properties of the in-app message to build your custom UI. Example of how to do this:

braze.subscribeToInAppMessage((inAppMessage) => {
  // check which type of in-app message it is
  if (inAppMessage instanceof ModalMessage) {
    // show modal message
  } // handle other in-app message types
});

How you show the modal message in this example will vary dramatically based on which frontend libraries/framework you're using. For example, you could create a React component that takes in relevant props from the in-app message subclass (see ModalMessage docs for that subclass's properties). In this example, you may want to pass in the textAlignment, backgroundColor, textColor, etc. fields and then use them to style the component correctly. Or you may want to have a standard background color for all your custom messages and ignore that property. It's all up to you and your team.