Tip on: Rolling our Sequenced Guide Nurturing Program based on the In-App CTAs/ Buttons

harshibanka
Rank
Badge +2

Hello PX Tribe!  

I want to share a topic that has been frequently coming up from our customers  and which I think could be useful to this group - How to trigger sequential in-app guides from In-App CTAs/ Button clicks.  

As most of us know, today PX allows us to trigger In-App guides based on "views/ completions" of other guides; however, there is no In-App Audience Rule to trigger based on unique CTA clicks on the In-App Guide.  

 

But.... we can still do this 🙂  

 

See below solutions for various scenarios: These can be used for various use cases like Customer Onboarding or Feature Activation or guiding the customer through the Adoption Journey/ Prescriptive Value Path. 

 

Scenario 1 - Based on CTA/ Button Clicks on In-App Guide # 1, trigger sequential guides one after another (Using Query Parameter)  

 

  • Start with an In-App Dialogue with a CTA/ Button
  • In the linked/follow-up In-App Guide >Go to Audience rules > Choose "Query Parameter" Rule > Query Param Name (launchGuideName) -> Add the value welcome.
  • This next In-App Guide would trigger if the user clicked on the button of the first guide, as it matches with the Query Param on your linked guides.

Scenario 2 - Based on CTA/ Button Clicks on In-App Guide # 1, trigger sequential guides after xx days (Using Custom Events).

This method is also preferred in cases where the links are outside of your app, where the PX Tag is not installed.

  • Start with an In-App Dialogue with a CTA/ Button
  • Use Custom Events to track this button click
  • Map it as a feature in the Product Mapper
  • Trigger Guide nurturing program after xx days using the Custom Event or Product Mapped Feature Rule from the Engagement Audience Rules

 

Scenario 3 - Collect Survey Responses (Eg. User Role) and serve In-App Guide nurturing programs based on the Ideal Customer Profile (ICP) (Using PX Rest API)

 

 This community post here from @link_black is a great, detailed explanation to achieve the above. Note, the post talks about SFDC Integration, but this use case can be achieved without it as well.  Please let me know your thoughts/ questions/ any other ideas.

Harshi (pronounced like the Hershey's chocolate); PLG and Digital CS Evangelist

14 replies

I

Hello, 

I have tried to get Scenario 1 working, but it fails every time. Can anyone confirm that these are the steps: 

  • Create Original/Main In-App Guide with a CTA/ Button
    • Add the link to the Main dialogue CTA:
    •  <a href=”https://<YourWebsite>/<LandingPage>?<QueryKey>=<QueryValue>
    • Ex: https://<Website.com>/home?guide=notes
  • Create 2nd In-App Dialogue
  • In the 2nd In-App dialogue:
    • Navigate to Audience rules → Click "Query Parameter" 
    • Enter your Query Parameter Key <QueryKey> 
      • Ex: guide
    • Select your rule (IS, IS NOT, etc.)
    • Enter your Query Parameter Value <QueryValue>
      • Ex: notes

To test: 

  1. Open your Original/Main In-App Guide
  2. Click your CTA
  3. CTA should reroute you to the second engagement
rketharaju
Rank
Userlevel 2
Badge

Hello @IO Community Account ,

 

When we refer the URL as https://app.aptrinsic.com/ it should be replaced by your application URL. In case you have further issues, could you please share your PX Instance name, engagement details to my email ID: rketharaju@gainsight.com or you can reach out to our support team.

 

Raghuram Ketharaju : Your PX Technical Partner!!
I

Hello @rketharaju, 

Yes, we have replaced it with our application URL. I will reach out with further details. 

Thanks!

JPKelliher
Rank
Userlevel 4
Badge

@harshibanka

Harshi, this is a great idea. We are trying to launch a follow engagement using a “dynamic url” in the call to action button. Do you know if there is a way to accomplish that?

 

Example: https://stg1-dnbh.com/company/1215b0cc-707c-34d5-b162-da0e#report/company_summary?launchguide=balderdash2

The part of the URL in red is dynamic and we cannot use a specific URL in the CTA. The highlighted query parameter works great. Unfortunately, the CTA cannot use a “*” placeholder like the rules logic in PX.

@JayS

 

J.P. Kelliher
C
Rank

For relative paths just do 

<a href="?q_monitoring_expertise=Beginner&guidestep=2">

 

Example with both the link out and the onclick to store the info:

 

<div class="apt-custom-step-navigation">
    <div class="apt-custom-step-navigation-buttons">
        <div class="apt-custom-step-navigation-button">
            <p><span class="apt-custom-button" style="color: #ffffff; font-family: Roboto;"><a href="?q_monitoring_expertise=Beginner&guidestep=2" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Beginner'});" style="text-decoration: none; color: inherit;"><span class="apt-custom-button-internal">Beginner</span></a></span></p>
        </div>
        <div class="apt-custom-step-navigation-button">
            <p><span class="apt-custom-button" style="color: #ffffff; font-family: Roboto;"><a href="?q_monitoring_expertise=Intermediate&guidestep=2" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Intermediate'});" style="text-decoration: none; color: inherit;"><span class="apt-custom-button-internal">Intermediate</span></a></span></p>
        </div>
        <div class="apt-custom-step-navigation-button">
            <p><span class="apt-custom-button" style="color: #ffffff; font-family: Roboto;"><a href="?q_monitoring_expertise=Advanced&guidestep=2" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Advanced'});" style="text-decoration: none; color: inherit;"><span class="apt-custom-button-internal">Advanced</span></a></span></p>
        </div>
        <div class="apt-custom-step-navigation-button">
            <p><span class="apt-custom-button" style="color: #ffffff; font-family: Roboto;"><a href="?q_monitoring_expertise=Expert&guidestep=2" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Expert'});" style="text-decoration: none; color: inherit;"><span class="apt-custom-button-internal">Expert</span></a></span></p>
        </div></div></div>

 

Our CSS for these buttons, to make them look like the standard navigation buttons (we have them in green):

/* –––– ⚡ CUSTOM BUTTONS –––– */

/* The classes and hierarchy try to follow the standard navigation buttons, but can't be exactly the same */
.apt-custom-step-navigation {
    line-height: normal;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  background-color: none;
  width: 100%;
  padding: 20px 0px 20px 0px;
  justify-content: flex-end;

}

.apt-custom-step-navigation-buttons {
    display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;

}

.apt-custom-step-navigation-button {
  font-family: 'IBM Plex Sans', 'Roboto', sans-serif;
  font-size: 14px;
  text-align: center;
  min-width: 15px;
  cursor: pointer;
  text-align: center;
  line-height: normal;
  padding: 10px 10px 10px 0px;
  display:inline-block;
  cursor: pointer;

}

/* Outer span */
.apt-custom-button {

}

/* Inner span */
.apt-custom-button-internal {
  text-align: center;
  line-height: normal;
  border-radius: 16px;
  background-color: rgb(0, 152, 21);
  padding: 10px 15px 10px   15px;
  display:inline-block;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  font-size: 14px;
  float:right;
}

 

You use the buttons only as the last step of an engagement obviously. To hide the standard navigation buttons, so only yours are seen, add this to the step CSS (not the guide CSS)

 

.px-step-navigation {
  visibility:hidden;
  height: 0px;
  padding: 0px;
}

 

I just discovered today that you can also embed radio buttons, if you just want to take an answer and store to the user profile (custom attribute), so you can trigger another guide based on that attribute later:

<div class="px-dialog-content" style="text-align: justify;">
    <div class="apt-survey-multi-choice-radio-answers">
        <label class="custom-survey-multi-choice-radio">
            <input type="radio" value="Beginner" name="Expertise" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Beginner'}); return true;">
            <div class="custom-multi-survey-answer">Beginner</div>
        </label>
        <label class="custom-survey-multi-choice-radio">
            <input type="radio" value="Expert" name="Expertise" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Expert'}); return true;">
            <div class="custom-multi-survey-answer">Expert</div>
        </label>
    </div></div>

with a little CSS to make them behave:

/* Survey Answer */

.custom-multi-survey-answer {
    font-size: 14px;
    max-width: 370px;
    min-height: 30px;
    color: #ffffff;
    width: 500px;
    outline: none;
    border: hidden;
    padding: 8px 8px;
    border-radius: 3px;
}

.custom-survey-multi-choice-radio
{
  display:flex;
  align-items: center;
  cursor: pointer;
}

 

JPKelliher
Rank
Userlevel 4
Badge

@cakrit  OMG!!!! this is awesome. 

 

Thank you for sharing. And the Navi-button CSS is super helpful. 

 

And thank you for the radio button answer. We tried that, but had a multi-select need so the mini script was difficult for use of an “uncheck” and it can expose a security issue. We have opted for a webhook and Lambda function to produce the same effect. And its also editable by the user!! Please let me know if you would like to see more.

J.P. Kelliher
C
Rank

Actually yes, I'd like to see the multi-select code, in case we decide to replace all existing surveys with guides (exactly because of the ability to customize like this).

C
Rank

@JPKelliher and @harshibanka  we weren’t happy with the previous solutions after all:

  • The buttons with the link resulted in a full reload of the page, which is bad UX. 
  • Saving the parameter to then trigger a different engagement is bearable, but sometimes it takes 10 seconds for the next engagement to trigger. So no real branching there either. 

So I messed around with the possibilities of the onclick a bit and decided to just display different divs within the same step, as shown in a dialog step below. Of course this is quite limited too, as you can’t really branch out this way and show guides with multiple different steps. It would be ideal if we could just select which engagement to trigger next based on a choice. 

<div class="px-dialog-content" id="expertise_question" style="text-align: justify; display: block;">To provide the best possible onboarding experience, we would like to ask you a question.
    <br>
    <br>Expertise question

    <br>
    <div class="apt-survey-multi-choice-radio-answers">
        <label class="custom-survey-multi-choice-radio">
            <input type="radio" value="1" name="exp_q" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Beginner'}); getElementById('expertise_question').style.display='none'; getElementById('beginner').style.display='block'; return true;">
            <div class="custom-multi-survey-answer">Beginner</div>
        </label>
        <label class="custom-survey-multi-choice-radio">
            <input type="radio" value="2" name="exp_q" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Intermediate'}); getElementById('expertise_question').style.display='none'; getElementById('intermediate').style.display='block'; return true;">
            <div class="custom-multi-survey-answer">Intermediate</div>
        </label>
        <label class="custom-survey-multi-choice-radio">
            <input type="radio" value="2" name="exp_q" onclick="aptrinsic('set', 'user', {'q_monitoring_expertise':'Advanced'}); getElementById('expertise_question').style.display='none'; getElementById('advanced').style.display='block'; return true;">
            <div class="custom-multi-survey-answer">Expert</div>
        </label>
    </div>
    <br>
</div>
<div class="px-dialog-content" id="beginner" style="display: none;">Content for beginner</div>
<div class="px-dialog-content" id="intermediate" style="display: none;">Content for intermediate</div>
<div class="px-dialog-content" id="advanced" style="display: none;">Content for advanced</div>

 

JPKelliher
Rank
Userlevel 4
Badge

@cakrit 

 I agree. Launching any PX engagement, attribute tag, or eve the K-Bot should be built into the platform itself. I have seen this in other platforms, but would like to see PX adopt it. The Webhook to Lambda function works, but it still requires engineering to put the Lambda function together in an AWS environment. (Which is why i haven’t shared the details yet. I am not sure what all of the code means and I can’t post anything that may have confidential links in it.)

J.P. Kelliher
JayS
Rank
Userlevel 4

Hi @harshibanka,

Has there been any update on this? I’ve been trying to get scenario 1 to work, and it seems to sometimes, but then it doesn’t work, and then I may get a “502 bad gateway” error.

We would REALLY love to be able to string engagements together into a learning journey for our users. 

Appreciate your help. Should I submit this as an “idea” as well, or do you know if it’s already on the roadmap?

Thank you.

Jay Sherwood
aharkut
Rank
Userlevel 3
Badge

Hi @JayS , we are looking at solving the following as a roadmap item:

  1. Firstly, provide CTA analytics for In-App and Email engagements - This will provide you a way to analyze what all custom buttons or hyperlinked content in your engagement has been clicked
  2. Once the analytics is available on PX, we will expose in Audience rules of engagements ability to trigger engagements based on the CTA interactions in another engagement.
  3. Today we provide rules on Engagement Viewed/ Completed and Survey responses to trigger sequential engagements. With CTAs we will be covering another important use-case of sequential guides based on CTA interaction

 

Hope this clarifies.

 

Thanks,

Abhilash

JayS
Rank
Userlevel 4

Hi @aharkut,

That sounds great. We have had our product teams ask about which CTA was clicked, so that will be helpful.

In this specific request, though, I was looking to launch the next engagement on the last step of the first engagement. So the user wouldn’t have “completed” the first one yet for the audience rules to catch up and launch the next engagement.

What we’re envisioning is a final dialog window in an engagment that offers the user multiple options of what they would like to learn next. @JPKelliher described it in this post where he tried to pull everything together into one request.

Regards,

Jay 

Jay Sherwood
JayS
Rank
Userlevel 4

Hello @harshibanka and @aharkut. I’m still struggling with this. I’ve been unable to ever have success using query parameters. I’m sure I’m probably missing something, but I feel like I’ve followed the steps you outline. What a want to do today:

  1. launch a banner that asks users if they’d like to provide feedback.
  2. If/when the click the “submit feedback” custom button, the survey should open.

 

cc: @aroberts 

Jay Sherwood
aroberts
Rank
Userlevel 4
Badge +6

@JayS Sounds like a great use case! If you followed the above instructions and it’s still not working, I recommend sending an email to support to take a look and troubleshoot. 

Reply


Terms & ConditionsCookie settings