Creating a new experience type
Before you create a new experience type, please follow our SDK guide to get your development environment ready using one of our SDKs.
Choose what to personalize
If you are working with a product manager, they likely know exactly what part of your app they would like to be able to personalize. It could be a banner on your dashboard or a module on your homepage. If you’re not sure what to personalize, don’t fret. This process is lightweight and you can easily choose another experience later. Whatever experience you choose, find the place in your code where this UI is defined.
The best personalizations have a big impact on your users’ experience. Choose a part of your app that the user experience can be significantly affected by personalization.
Decide which values to personalize
Now that you have chosen what to personalize, you will need to decide which values can be changed. You can of course choose text, but you can also change things like border styles, background colors, images, and even how many items are in a list. You will be amazed at how much you can personalize with a little imagination.
Extract hardcoded values
If any of the values you are customizing are hardcoded in your UI (and they probably are, that’s okay), you will need to extract those values into variables and render placeholders instead.
The Resonance SDKs are server-side SDKs, so if your UI is not server-side rendered (SSR), you will need to move your extracted values onto your server and pass them down in your data payload to render them in your UI.
Create an experience type in Resonance
Your experience is now ready to be personalized! The next step is to create an “Experience type” in your Resonance dashboard. For each of the values you chose to personalize, you will define a name, a value type (e.g., Copy, Raw String, Image, Color, URL, Boolean, Enum, nested object, etc.).
Notes on value types
Copy The copy value type allows text formatting to be applied (these values will be served as sanitized HTML so the text formatting can be displayed). If you don’t want to allow text formatting, you can choose Raw String instead.
The text formatting will only be rendered if you ensure your UI does not escape the HTML. In React, this is done by using the dangerouslySetInnerHTML prop. If you are using a different framework, you will need to check the documentation for how to render HTML.
Resonance sanitizes all Copy strings to avoid XSS vulnerabilities, but there is still risk so you should consider using your own trusted sanitization tools on these strings.
URL The URL value type ensure that the value is a fully qualified URL, including the protocol. If your use case can accept relative URLs, you will need to choose Raw String instead.
Enum The Enum type allows you to define a list of strings or numbers. When someone on your team later creates a new experience using this type, these will be the only values that can be chosen for this value. You might use this for icons or colors within a theme.
Use the Resonance SDK
With the new experience type defined in Resonance, you can now integrate the experience data from Resonance in your app. The experience type page on the Resonance dashboard has example SDK code that you can paste into your app. By passing in your default values, you will know that Resonance will always give you the right data to render. You can learn more about using the SDKS in the SDK Guide.
Render your experience
The last step is to render the data from the Resonance SDK in your UI. To do this, you just need to replace the data you extracted earlier with the data from Resonance. Now this part of your app can render personalized experiences for all of your users!