Skip to main content

Displaying the CTA

You will use the information that you got from the response to create a card and display a Call to Action (CTA) for your user to see and click on which will take them to the Nav Embedded Finance application.

When the link on the CTA is clicked, the user should be sent to our Embedded Finance application.

Example​

import React from 'react'

export const CtaExample = ({ body, title, imageURL, imageAltText, linkOpensInNewTab, linkURL, linkText }) => (
  <div style={{ display: 'inline-block', padding: '20px 40px', border: '1px solid #ccc' }}>
    <div style={{ display: 'flex' }}>
      <img alt={imageAltText} src={imageURL} />
      <div>
        <h3>{title}</h3>
        <p>{body}</p>
      </div>
    </div>
    <div style={{ textAlign: 'right', marginRight: 20 }}>
      <a href={linkURL} target={linkOpensInNewTab ? '_blank' : '_self'}>
        {linkText}
      </a>
    </div>
  </div>
)

const ctaExampleData = {
  data: {
    cta: {
      additionalDetails: null,
      body: 'Apply confidently knowing your business may be a good fit.',
      title: 'See your top financing options',
      type: 'LOANS_MF_75',
      imageURL: 'https://design-assets.nav.com/illustrations/match-green-light.svg',
      imageAltText: 'Three sets of dollar signs and checkmarks',
      linkOpensInNewTab: true,
      linkURL: 'https://YOUR_WEBSITE.com/nav-redirect?redirect_uri=/partner/financing/loans&terms_accepted=false',
      linkText: 'View your offers',
    },
  },
}

// The CTA _might_ be `null` if no CTA applies to this user
if (ctaExampleData.data.cta) {
  return <CtaExample {...ctaExampleData.data.cta} />
}

Output:

Three sets of dollar signs and checkmarksThree sets of dollar signs and checkmarks

See your top financing options

Apply confidently knowing your business may be a good fit.