Blog

TOTW : Personalise user experiences like never before using Gainsight PX


Userlevel 6
Badge

Hello PX-Rockstars!

What I am going to share with you all today is so close to my heart šŸ«¶
Ā 

If you have attended our recent office hours (Recording here), you already know what I am sharing today from the title itself. But for those who could not make it - here you go; this post is a recommended guide on personalising user experiences by capturing user inputs.Ā 
Ā 

Over the last few months, we have seen significant updates to our V2 editor templates. Thanks to Abhilash (Ā @aharkutĀ )Ā ,Ā our product manager, who takes the time to improve these templates to cater to various use cases. So if you see something inspirational and operational regarding dialogs/in-app engagements, you know whom to share it with.Ā 


Letā€™s get to the basics ofĀ ā€œUser profiling.ā€

ā€œUser profilingā€Ā is the process of improving the user profile data so that we can group them into specific groups on various metrics and personalize their reach outs and engagements in multiple ways.

So user profiling is the first step you need to focus on to personalize user experiences.

How do we do this in PX today?

You can build some onboarding questionnaires into the product to get started. Still, if you donā€™t want to waste your engineering efforts in this process, I recommend you try our V2 engagement dialogs to do the same.Ā 

Ā 

Step 1: Select a default template from the V2 editor templates


zwRBSBivROmMIhnO1J08kh3jIvGgo0WcPLyxIEU0fcU-CnXeZji206qPZzDa9t0bvNm4EZY5Soqhe4YZOERQeH_huGViVc5Y65BFlJf6ILWA4BPImQfJb9d0C8zzvtNGcvTXUZQfrk7V2oVB2nWQURM

Ā 

Step 2: We will add and edit the existing cells from this template to achieve what we want. When you hover over any section in the template, you see two symbols + and recycle bin.Ā 


3QLvVjlTlXIEigYmbxZDfTv7QZnp15IJRLyi9FCGbgXcGKdkn6pMQxdYQczYpK-2oBo7JwocrXP35-RIZ_vJXdXwP-9K03CRZJm3r5ncIEuT25Z7s6GRFj5xwMxvSVgoQnyewZSBU18Bp_XZZ0zvSa4

Ā 

Step 3: Remove all cells except the header by clicking on the ā€œrecycle binā€ icon on each cell

Ā 

PgT94iKJ0eda5xjvk-KjJuwp5zcGigci1LgXIlN6Fvg9rYKldZlGNQV0ld5NLCmeeN4LEdDzA93G5Yr9b9xpUWXo0cqFcXp8At_I_c_Lp8fW9uclndWapd4_zdYaz1tcwYa_4w6jyxn0C2lvCXlfF-A

Ā 

Step 4: Now letā€™s add a three-partition cell below this header cell by clicking on the plus icon

Ā 

LEboSY_bgaqh6f0vYBegzBBZLUFJQrtNfTaIaX66vVcsV8sXZ4YIXq_8m4JO9GbXkupgScgvtxCbMbQp4ElKK6kwC6BCmQx-YROGwTpEr6bnykVfo0CDBR3RBXiKxMO3YeLPubkIQ7xukkPvVXaF2Q4

Ā 

Step 5: Add a custom button to each of the three partition cells, which will look like the one below.

Ā 

Step 6: To add the custom button, you need to add it by clicking the ā€œinsert custom buttonā€ on the editor pane.Ā Ā 

Step 7: Now edit each custom button in ā€œButton Settingsā€Ā 

Ā 

PwfKybgxgR5MX6v_0z645OWR4soC0iIWBWDIXvCHCEhriZxvhiJ9CGxOsWdbnzWTBgUfrUhPF1y9oICltYcbemkzlFvqp7LvzEEhhdeWvTdan99Kt1lVTbkMwjLkv-Yq9bnyzYs8ZyEoJpKAX1xv73Y

Ā 

Step 8: Set an action for the button, defining what a click on the button should do

Ā 

ELWrHtX_q7-eQ5eP7Xf0dAk3qiSnPfWdg7CmH-vCcHJeupF3G6nXwauCEf5dll5tf3KR3IbOatvSomxpSLX8mz6v-mMIgoreOiosCkuwQ2lqhpOtFlmhQXKEy7ork3dMk50GjY9PCW4PgRQK39Uc_rg

Ā 

Step 9: In our case, it is ā€œUpdate user attribute,ā€ so choose that field from the drop-down list.Ā 

Ā 

1nvebCVAXO9T7ca3Ts_zWtoqKTB1EtriUaCZfue5Vni-wplrAyDgp60XBCE6pHYyL-kZZOxNgXTzSaSPf9Mm_f_lu8KD8JQZo1_VQC6JOqNk8VwmMrY0Ze8C7nl5bO3IDJP_Oy79aA2rXACYFcikt70

Ā 

Step 10: Now define what value the button should update in the user profile by giving a value to the user attribute as above and do the same for the rest of the buttons.Ā 

Ā 

cAuisS9eYTnS75p5kkQWI4koJZGyyJzk15YfdBf6eygND0wXExZS5MW0i20zWGaSE79WLwd14lcErFgtNR1fFBE7S30Mu0wgO6r9ei0CDkkfXYFtacM_LHJ9dbmnCi4M0qofTGs8TjFFFno4VTVeAa4

Step 11: You can update the boolean fields of a user profile using the same logic as belowĀ 

Ā 

rj0rVGvl5Bl0pdlEmLFif1N255SnZWb-eEDnXH5Oq0q9PrMi1qSpw_pZIqLKMBOQJPVR2nlN2FKs-CHJMpwi7qpPJwnCS4xZVWFKFXZHLp_qLty1fLuLSJnGaNATtmLk4Tm8j6LMFcPfRIHztY8ewW4

Ā 

Amazing isnā€™t it?Ā 
Ā 

User profiling is bliss to business owners and campaign strategists who wants to drive adoption using personalized journeys. This exercise will help you for sure!

Happy PX-ing!

(Did I say,Ā FOLLOW MEĀ for more -instead of Bye!šŸ˜‰)

Ā 


10 replies

Userlevel 5
Badge +3

LOVE this!Ā 

@SruthimallaĀ - Great post, weā€™re actively working on implementing this. I just saw that I was prompted with this when logging into PX:
Ā 

Ā I noted that I was able to select and highlight multiple items represented by icons. This is a much better experience than whatā€™s available with the custom buttons today. Is this a preview of whatā€™s to come soon? Or is there a way to implement this now? Thanks!

Userlevel 5
Badge +2

Hey @gatherholt! This was a project I was leading and am happy to help share some insight into how we managed to get this working as you saw. (GIF below for historical purposes & full visibility)

Unfortunately as of today (June 22, 2023) we are not able to offer multiple choice buttons like you can see in the engagementĀ natively. To overcome this challenge we used some custom HTML, CSS and Javascript to present buttons in the way you see here.

Weā€™ll look to create a post dedicated on how to create a similar experience to this over the next few weeks and I will make sure to update this thread with the link. In the meantime to give you a quick answer - we created hidden radio buttons for the first page (confirming role) and used a label to give the appearance of a actual button. For the second page (confirming goal), we used a similar approach but with checkboxes. Whenever an option is selected, it runs an ā€œonclickā€ that allows for us to execute Javascript to update the users identity.

Hope it helps!

@aaronhattonĀ - Very cool! Sounds like a lot went into this. That would great if youā€™re looking to outline how this was accomplished in a new post, would love to see this!

Userlevel 4
Badge

@aaronhattonĀ I love this as well. It is done way better than my team implemented. Any chance you would share the HTML /CCS of the engagement with us? I really like that the selections light up when clicked but not sure how to do that myself.

Ā 

Additionally, I assume this is using the attribute update when the user selects it. What would happend if I clicked one and then unclicked it?

Ā 

Ā 

Userlevel 4

This is awesome, @aaronhatton! The setup and image sizes are great! Would love to see the HTML/CSS; would make it so much easier to replicate with our own text and images.Ā šŸ™‚

Userlevel 5
Badge +2

Hey all, thanks for your patience! I just published a separate post about the use case I shared above.

CC: @JaySĀ @JPKelliherĀ @gatherholtĀ 

I have noticed that if I have multiple slides with custom buttons, it's not possible to "force" users to select an option. They are able to navigate through the slides and just close the engagement without selecting any buttons. How can I prevent this?

Userlevel 5
Badge +2

Hey @Tamarar! I had a similar struggle. We managed to get past this by removing the default navigation, and adding a custom button. On the HTML for the custom button we configured it to navigate to the next step and then added a ā€œDisabledā€ attribute.

We then removed the Disabled attribute using JavaScript whenever a button was clicked (onClick). Hereā€™s the code for that part.


HTML / JavaScript

onclick="document.querySelector('#pxCustomButton-xxxxxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxxxx').removeAttribute('disabled');


You may notice that there is a section for:Ā #pxCustomButton-xxxxxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxxxx.Ā You will need to find the value of this from the HTML of the custom button as every custom button is unique.

Ā 

Hope it helps!

Thank you @aaronhatton. I'll try that.Ā 

Reply