Can I add App Store + Google Play buttons to a card?

[Hannah_Mussi]

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!

[Alyssa_Hubbard]

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

[Hannah_Mussi]

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;