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

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

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.

Hello @rketharaju, 

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

Thanks!

@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

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;
}

@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.

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).

@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>

@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.)

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.

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

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.

• Launch engagement, guide, article, etc. from engagement, button. link, etc.

Regards,

Jay 

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 

@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.