Next Best Action

A specialized component that showcases a Call to Action we'd like the customer to take.

React Component

Default

Offer an additional buy with Upsell

Maximize your profit by adding an Upsell to your order flow. This section might wrap to two lines.

Here is the second line. It has some text also.

Graphic on Right

Offer an additional buy with Upsell

Maximize your profit by adding an Upsell to your order flow. This section might wrap to two lines.

Here is the second line. It has some text also.

Sage Component

SageNextBestAction

<h3>Default</h3>
<%= sage_component SageNextBestAction, {
  card_color: "draft",
  dismissable: true,
  dismiss_attributes: {
    onclick: "console.log('Add your own dismiss functionality here!')",
  },
  graphic: {
    element: image_tag("next_best_action_graphic.png", alt: ""),
  },
  title: "Offer an additional buy with Upsell",
} do %>
  <%= content_for :sage_next_best_action_description do %>
    <p>Maximize your profit by adding an Upsell to your order flow. This section might wrap to two lines.</p>
    <p>Here is the second line. It has some text also.</p>
  <% end %>
  <%= content_for :sage_next_best_action_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Add an Upsell",
    } %>
  <% end %>
<% end %>

<h3>Graphic on Right</h3>
<%= sage_component SageNextBestAction, {
  card_color: "draft",
  dismissable: true,
  dismiss_attributes: {
    onclick: "console.log('Add your own dismiss functionality here!')",
  },
  graphic: {
    element: image_tag("next_best_action_graphic.png", alt: ""),
    on_right: true,
  },
  title: "Offer an additional buy with Upsell",
} do %>
  <%= content_for :sage_next_best_action_description do %>
    <p>Maximize your profit by adding an Upsell to your order flow. This section might wrap to two lines.</p>
    <p>Here is the second line. It has some text also.</p>
  <% end %>
  <%= content_for :sage_next_best_action_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Add an Upsell",
    } %>
  <% end %>
<% end %>

Property	Description	Type	Default
`card_color`	Applies color to card. Options include `draft`, `info`, `success`, `warning`, `danger`	`"draft"`, `"info"`, `"success"`, `"warning"`, `"danger"`	`"draft"`
`dismissable`	Allows for a close icon that can dismiss the component.	Boolean	`true`
`dismiss_attributes`	Allows for arbitrary functionality when the Close button is clicked.	Function	`nil`
`graphic`	Allows for graphic markup and placement.	`graphic: { element: String, on_right: Boolean, }`	`nil`
`title`	Sets the title text to be displayed.	String	`nil`
Sections		`Element`
`sage_next_best_action_description`	Allows for descriptive HTML content.	Restricted to text elements.
`sage_next_best_action_actions`	Provides the HTML content for the button component, rendered underneath the title and description.	Restricted to Button `sage_component`.

Don't