<  Widgets

RocketFuel Button Link

Widget

### Description

This widget is designed to act as a link button or event trigger. It is highly configurable and can be styled using the available options from the instance or options schema. You may also customize and associate custom templates with this widget.

### Configuration

The simplest way to configure this widget is through the instance options within the service portal.

### Instance Options

|  Option       | Property | Comments | Source |
| ----- |:-----:| ---- | ---- |
| Type | `type` | Specify type of link (Page, URL, Catalog Category, Catalog Item, KB Topic, KB Article, KB Category) | Instance |
| Page | `sp_page` | Used to specify the page. | Instance |
| Title | `title` | Used to specify the title text. | Instance |
| Short Description | `short_description` | Specifies a short description to use below the title text. | Instance |
| Bootstrap Color | `color` | Used to set the color of the background and title text for the widget. The property takes standard Bootstrap color values as a string (e.g. 'Default', 'Primary', 'Success', etc...) | Instance |
| Bootstrap Class Name | `class` | Used to name the bootstrap class for the widget. | Instance |
| Show Panel | `show_panel` | Shows interactive buttons on a panel. | Options Schema |
| Background Color | `background_color` | The background color will be driven off of the Bootstrap color / 'color' variable. | Options Schema |
| Count Table | `count_table` | Specifies a table to use for the count. | Options Schema |
| Count Encoded Query | `count_encoded_query` | Used to specify the encoded query that you would like to use for the selected table to render the count. | Options Schema |
| Height | `height` | Used to specify the height of the widget's parent element. | Options Schema |
| Target | `target` | Sets the value of the HTML target attribute. | Options Schema |
| Broadcast Event | `eventname` | Sets a $broadcast event name to fire when a user clicks on the widget.  | Options Schema |
| Subscribe Event | `eventname` | Handles a $on event name to use for the count.  | Options Schema |
| HREF / URL | `href` | Sets the value of the URL that a user will be taken to when they click on the widget. | Instance |
| Image | `image` | Allows you to upload an image for use with a selected template. The value of this property sets the url() method in the CSS background property for all standard templates. | Instance |
| Template | `u_template` | Takes an `id` from a ngTemplate associated with the widget. These templates can be used to customize the layout of the widget. | Instance |

### CSS/SASS Variables

_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._

| Variable | Comments |
| -------- |:---|
| `$nr-buttonlink-image-size` | Used to set the height of an image, and the height and width of an icon. |
| `$nr-buttonlink-title-size` | Used to set the size of the title text. |
| `$nr-buttonlink-title-color` | Used to set the color of the title text. |
| `$nr-buttonlink-text-color` | Sets the color of the short description.  |
| `$nr-buttonlink-background-size` | Sets the background size of the buttonlink-image template.  |

### Templates

| Name | Comments |
| -------- |:---|
| `bl-card-template.html` | Standard card template using nr-card-template directive. |
| `image-panel.html` | Standard image panel template. |
| `icon-top.html` | Align top icon hover template. |
| `icon-left.html` | Align left icon hover template.  |
| `image.html` | Standard image card template.  |
| `background-image.html  ` | Standard image background template.  |

### Sample Data
```json
{
"options": {
"show_panel": "true",
"image": "https://via.placeholder.com/200/EEEEEE/000000",
"u_template": "image-panel.html",
"color": "default",
"count_table": "incident",
"count_encoded_query": "",
"title": "Button Link",
"height": "160px",
"short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
}
```

Get Awesome Updates

Enter your email address for news and updates from NewRocket.

Thanks for your email!
There was an error, please try submitting again.