I have a client who wants to add App Store and Google Play buttons to a single FAQ card in lieu of regular CTAs. They have both Tablet and Mobile apps and would like to add 4 of these buttons total to direct users to the app. This is the format they would like:
Tablet App
Mobile App
Is this possible? Thank you!
Hi Hannah,
Yes this is possible and there are a few ways to go about this. What I would recommend as one possible method is to add a conditional field in Knowledge Graph and if it’s a “Yes” then, in the hbs file, indicate to add a div class to have these images appear.
Here are the steps to do so:
1 - Create the Yes/No field in KG and label something like c_appCTA
2 - In the component.js - file, add the the appCTA
attribute such as:
return {
appCta: profile.c_appCTA,
CTA1: {...}
}
3 - In the template.hbs file, add the conditional formatting within the inline of the details card:
{{#if card.appCta}}
<div class="HitchhikerFaqAccordion-appCTA">
<div class="app-div"><a href="https://hitchhikers.yext.com/login" class="app appStoreLink" target="_blank" style="outline: 0px;">
<img class="app-img" src="https://assets.sitescdn.net/landingpages/modules/app_download/images/app-store.svg" alt="app store image"></a></div>
<div class="app-div"><a href="https://hitchhikers.yext.com/login" class="app google-play" target="_blank" style="outline: 0px;">
<img class="app-img" src="https://assets.sitescdn.net/landingpages/modules/app_download/images/google-play.svg" alt="google play store image"></a></div>
</div>
{{/if}}
The full result would appear as follows:
You’ll want to replace the href links to go to the appropriate URL for your client’s apps.
If you need to add 4 images, simply duplicate the div class and img classes and add the corresponding SVG and href URLs.
Here’s an example outcome:
Let us know if you have any questions or run into any issues.
Best,
Alyssa
1 Like
Thank you @Alyssa_Hubbard, looks great!
In case anyone else is curious, to add the subtitles and horizontally align the CTAs, I added a text div and included everything in a CTA wrapper which I then adjusted with CSS. Here’s my template.hbs code:
{{#if card.appCta}}
<div class="HitchhikerFaqAccordion-appCTAContainer">
<div class="HitchhikerFaqAccordion-appCTAWrapper">
<div class="HitchhikerFaqAccordion-appCTAText">
Tablet App:
</div>
<div class="HitchhikerFaqAccordion-appCTA">
<div class="app-div">
<a href="https://hitchhikers.yext.com/login" class="app appStoreLink" target="_blank" style="outline: 0px;">
<img class="app-img" src="https://assets.sitescdn.net/landingpages/modules/app_download/images/app-store.svg" alt="app store image">
</a>
</div>
<div class="app-div">
<a href="https://hitchhikers.yext.com/login" class="app google-play" target="_blank" style="outline: 0px;">
<img class="app-img" src="https://assets.sitescdn.net/landingpages/modules/app_download/images/google-play.svg" alt="google play store image">
</a>
</div>
</div>
</div>
<div class="HitchhikerFaqAccordion-appCTAWrapper">
<div class="HitchhikerFaqAccordion-appCTAText">
Smartphone App:
</div>
<div class="HitchhikerFaqAccordion-appCTA">
<div class="app-div">
<a href="https://hitchhikers.yext.com/login" class="app appStoreLink" target="_blank" style="outline: 0px;">
<img class="app-img" src="https://assets.sitescdn.net/landingpages/modules/app_download/images/app-store.svg" alt="app store image">
</a>
</div>
<div class="app-div">
<a href="https://hitchhikers.yext.com/login" class="app google-play" target="_blank" style="outline: 0px;">
<img class="app-img" src="https://assets.sitescdn.net/landingpages/modules/app_download/images/google-play.svg" alt="google play store image">
</a>
</div>
</div>
</div>
</div>
{{/if}}
And then I horizontally aligned them in the answers.scss file with
.HitchhikerFaqAccordion-appCTA {
display: flex;
1 Like