Use image logos in CTA

Search
1

Hi team.

My clien would like to use an image logo in the location CTA.

They would like to use the delivery system logo as the CTA instead of the name of the company.

Is there a way to do it?

Thank you.

Lucas B.

2

Hi Lucas,

Great question. Are you trying to eliminate any text all together?

To add a custom icon, you would use iconUrl in the component.js file and enter the url or file path for that custom icon (in this case the delivery system logo). More on iconUrl here: Deep Dive into CTAs | Hitchhikers

If you want to then remove the label text from the CTA, I would recommend replacing the {{label}} in the handlebars file with iconUrl. This could look as follows:

{{#*inline 'CTA'}}
{{#if (all url label)}}
<div class="HitchhikerStandard-{{ctaName}}">
  <a class="HitchhikerCTA js-HitchhikerCTA{{#if modifiers}} {{modifiers}}{{/if}}"
    href="{{url}}"
    data-eventtype="{{eventType}}"
    data-eventoptions='{{json eventOptions}}'
    target="{{#if target}}{{target}}{{else}}_top{{/if}}"
    {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
    {{#if (any iconName iconUrl)}}
    <div class="HitchhikerCTA-iconWrapper">
      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
        "iconUrl": "{{iconUrl}}",
        "iconName": "{{iconName}}"
      }'></div>
    </div>
    {{/if}}
    <div class='HitchhikerCTA-iconLabel' data-opts='{
        "iconUrl": "{{iconUrl}}",
      }'>
    </div>
  </a>
</div>
{{/if}}
{{/inline}}

Let me know if that resolves or if you have further questions. Please be sure to QA across browsers and devices when making changes!

Best,
Alyssa

2 Likes
3

Hey Alyssa,

I am covering this request while Lucas is OOO.
Thanks for your feedback.
About adding the logos before the CTAs, thanks for the confirmation, I had this HH module in mind, but it will be the second option “removing the label text from the CTA” that will be needed here.

I did a few tests but cannot obtain the expected result. I mainly have 2 issues:

  1. The URL of the icon is displayed, not the icon itself.

    image
    image1858×977 197 KB

  2. This change would be needed just for some CTAs (the 2 last in the screenshot above), not all of them. Is there a way to add a condition to choose between the normal label (the 2 first CTAs in the screenshot) or the icon depending on the CTA ?

Thanks if you have any idea.

4

Adding a quick feedback to this post for archive.
Finally it was a syntax problem and changing/removing the text from CTAs was possible by modifying the “componont.js” of the location card.

So here is the code example for the 2 last CTAs without thex, just the icon

CTA3: { // The secondary call to action for the card
label: ’ ',
iconName: ‘chevron’,
url: Formatter.generateCTAFieldTypeLink(profile.c_deliveroo),
//Adding CTA icon for Deliveroo
iconUrl: “/static/assets/images/deliveroo.jpg”,
target: ‘_top’,
eventType: ‘CTA_CLICK’,
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ‘’,
}

The last thing that will be needed is to enlarge these specific icons to fill the CTA button.
Here the icons seem to be locked to the standard size. I tried to add custom size for icons (solution shared by Sherman) in the css file, but it applied to all the icons:

.HitchhikerCTA-icon, .HitchhikerCTA-icon .Icon svg {

  • width: 50px;*
  • height: 50px;*

So is this possible to apply custom size to CTAs individually ?

Thanks again for the help.