CTA Component

A CTA (Call-To-Action) component is a crucial element designed to prompt users to take a specific action on a webpage. This can include actions like clicking a button, filling out a form, or downloading a file. The primary purpose of a CTA component is to guide users towards a desired conversion goal.

Display type Button

Display type Arrow

Best practice

CTA-component, display type Button in a Flex Container:

Bolånekalkyl – räkna på bolån

Räkna ut hur mycket du kan låna
Se vad ditt lån kommer att kosta varje månad
Räkna på din lånekostnad om räntan ändras

Räkna på bolån

CTA-component, display type Arrow in a Flex Container:

Vill du anmäla konto?

Anmäl konto för elstöd och andra utbetalningar

Genom kontoregistret får du utbetalningar från företag och myndigheter direkt till ditt konto. Det kan vara till exempel utbetalning av lön från din arbetsgivare, barnbidrag från Försäkringskassan eller studiemedel från CSN. Pengarna betalas ut via Swedbanks lön- och utbetalningssystem. Du kan även lösa in din avi som du fått hemskickad.

Anmäl konto till Swedbanks kontoregister

When designing webpages, it's crucial to follow a key principle: use only one primary button per page. This approach ensures that users focus on a single, clear task. While additional actions can be available, there should only be one primary button to guide user attention. Providing too many options can overwhelm visitors, leading to inaction.

If several links hold the same level of importance, avoid using multiple buttons. Instead, opt for the arrow option and track all these links as CTAs. This strategy maintains visual clarity and helps monitor user interactions effectively.

Do

When there are multiple links, use the Arrow link layout instead.

Don't

Do not guide users to competing link targets.

The placement of the Link Button Primary is crucial for maximizing its effectiveness. A primary button that triggers the main action should be highly visible. Therefore, aim to place the button above the fold, which is the upper half of the webpage visible without scrolling. This ensures that users see and can interact with the primary button immediately, enhancing the likelihood of achieving the desired action.

The button copy is a crucial element of your page. The words on the buttons should clearly convey the action that will be executed when clicked. Make sure to use concise and descriptive language to inform users about what to expect, enhancing clarity and encouraging interaction.

Creating links for SEO and accessibility

Configuration in AEM

The CTA Component has two designs or display types.

Arrow
Button

The Link actions are:

Go to page
Open Virtual Assistant
Document
Email
Phone number
Withdraw cookie consent
Open cookie settings

Link text is the clickable text in a hyperlink that users see and interact with on a webpage.
The CTA component utilizes link text to guide users to take a specific action.
Creating effective links on a website is essential for both search engine optimization (SEO) and accessibility.

Creating links for SEO and accessibility

Link URL is the web address or destination that a hyperlink points to, guiding users to a specific webpage when clicked.
CTA component uses the Link URL to define the target location for the action.
Ensuring that the Link URL is correct and relevant is crucial for a seamless user experience, as it guarantees that users reach the intended destination and can complete the desired action efficiently.
Users should utilize the browse function to navigate to the appropriate page within the site structure, rather than entering a static link.

The Link targets are:

Default
Same Window
New Window

The default value is None.
Display type Button is always tracked as CTA (even if the Link Click Tageting drop-down says None.)
Display type Arrow is not tracked as CTA, but editor can change it.
The main purpose of the page should always be tracked as a CTA, even if it is an arrow link.

People look for