In this article:

A button can be added to your email content (both email fragments and templates) to highlight a call to action. It takes the form of a rectangle, with text added on top to provide instructions in your email content to tell recipients clearly what to do next.

Let´s imagine that you have created a new email fragment or template, have completed the email details, and are now in the HTML editor ready to add elements to your email fragment or template. (If you need to revise any of these steps, check out this article here).

From the menus on the right-hand side, select the content menu. Find the button icon in the content menu, and simply drag and drop that icon onto your email canvas.

You will notice that a placeholder button with the words, “Button text” has been added to the email canvas. To add your own text to the button instead, simply start typing where you see the text already in the box.

When you click anywhere in the frame around the button, a formatting menu for the text on the button will appear and you will see the following options to format your button:

Good to know!

You can still add Veeva tokens manually by typing them onto your button, but you might want to consider contacting us to add them to your merge tag list to save you some time in the future (support@getshaman.com).

You also have some additional optional settings to further personalize the button using the menu on the right-hand side.

Action - Here you can add an action such as if the reader of the email clicks on the image, a specific webpage will be opened. There are several options to choose from in the dropdown menu on the right-hand side (which shows “Open Website” as a default action).

Depending on which option you choose, additional fields will be displayed to further personalize the action. For example, if you choose the “Open Website” option, you will need to populate the URL link in the field provided. You can also define whether a new tab is opened, or if the webpage is viewed on the same tab in the reader's browser.

Top tip!

We always recommend you copy the URL directly from the browser before pasting it in this URL field to avoid any typos or incorrect links.

You may also see “Special Links” in blue on your actions menu. The button will then contain the information held in the token that is automatically populated in the menu on the right-hand side. The following special link tokens are available to use here:

Document links:

Meeting links:

Unsubscribe product link: {{unsubscribe_product_link}} This action will direct the recipient to a page where they can unsubscribe from receiving product information.

Colors: You can define the color of both the text on your button as well as the color of the button itself. Select from the color options available to change the color of the text or button. (Please note - in some accounts the color options are limited to maintain consistency when working with certain Products. If you have any doubts or questions about the options available to you, contact us at support@getshaman.com.

Auto Width: This setting is a toggle that sets the button automatically to an apt size in relation to the width of your email content. To set the width of the button manually, you can disable the auto width toggle and use the slider to resize your button to bigger or smaller.

Alignment: select an alignment for the button in relation to the column: left, center, right or full.

Line Height: Here you can set a specific line height for your text, which refers to the spacing between lines of text. You can increase or decrease this by using the minus and plus icons on either side of the numerical value. The percentage changes in multiples of 10 (eg. 120, 130, 140, etc) and is set as default at 130%.

Padding - The first padding settings in the button menu refer to the amount of padding between the text and the outer edge of the button. That is to say, how much space surrounds the text within the button. You can choose to add the same padding to all sides by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the padding size for each side of the text within your button. You can use the plus and minus icons to increase or decrease the padding, or you can type a numerical value directly into the padding box.

Border - Choosing “Solid”, “Dotted” or “Dashed” from the options in the dropdown menu you can set a border for your button. You can set this on all sides of your button using the “All Sides¨ option, or you can enable the “More Options” toggle on the right of the menu to view options to configure the border of each side - “Top”, “Bottom”, “Left” and “Right”. You can also use the plus and minus signs to define the width of the border, or alternatively add a value directly to the numerical fields available to maintain consistency across your borders.

Rounded border - This refers to the corners of the button, the larger the value of the rounded border, the more curved the corner will seem. The smaller the value in the rounded border field, the more square the corner will seem. You can choose to add the same rounded border to all corners by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the rounded border setting for each corner of your button.

Container Padding - Padding can be used to perfectly position the button within the body of your email content. You can choose to add the same padding to all sides by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the padding size for each side of the button. You can use the plus and minus icons to increase or decrease the padding, or you can type a numerical value directly into the padding box.

RESPONSIVE DESIGN

Hide on Desktop - When this toggle is enabled, the text will not be displayed when viewing the email on a desktop computer or laptop, it will only be viewable on a mobile view.

ood to know!

We highly recommend you pay attention to how your email content looks on both mobile and desktop views. To learn more great tips when creating email content compatible with mobile and desktop views, take a look at this article here.

To delete a button, simply click anywhere within the button to select it. You will then notice two icons - a bin icon to delete the button, and a copy icon to duplicate it.

Depending on which you wish to do, simply click the icon, and your button will either be deleted or duplicated.