Donation Component
The following identifies the steps to add and configure a customizable, customer-facing Donation component for Digital Menu Boards (DMB).
The Donation component enables customers to make a predefined or custom monetary donation to a specific cause.
Note
For additional Data Management configuration instructions, see Donations.
Create Content Design
→ → →
To create a new Content Design:
From the upper-right of the Content Designs homepage, select Create Content Design.
From Content Design Settings, define the following:
Field
Description
Content Design Name
Name for the Content Design.
Description
Description of the Content Design.
Content Design Size
From the dropdown, select the desired resolution for the Content Design.
Background Color
Select the color tile to select a background color for the Content Design.
Add Donation Component
To add a Donation component:
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Donate.
From Donate Component, define the following:
Setting
Description
Donate Component
Type a name for the Donate component screen.
Theme
Select the preferred theme for the component: Light Theme or Dark Theme.
Background
Select a background color for the component.
Text
For the Primary Text and Secondary Text on the screen, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Buttons
Background
Select a background color for the buttons.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the buttons, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Buttons (Alternate)
Background
Select a background color for the buttons.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the buttons, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the menu pane on the left, select Layers to view the component details.
The Donate component includes the following pages:
Page
Description
Select Cause
Define settings related to the donation cause, including the main prompt, and button options.
Select Amount
Define settings related to the donation amounts the customer can select.
Custom Amount
Define settings related to the screen where the customer can specify a custom donation amount.
Select Cause
To configure the Select Cause page of the Donate component:
From the Layers pane, select Select Cause.
From the right pane, type the preferred name for the Select Cause page.
From the Layers pane, select Cause Prompt.
From the right pane, define the following Text settings:
Setting
Description
Cause Prompt Name
Type the preferred name for the Cause Prompt element.
Primary Text
If selected, the prompt is displayed in large font.
Secondary Text
If selected, the prompt is displayed in medium font.
Custom
If selected, the prompt is displayed in a custom font.
Define the following Custom Text settings:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Justification - From the right of the color field, select a justification option.
Color - Select a font color. The HEX# for the selected color is displayed.
From the Layers pane, select Cause Options.
From the right pane, define the following Button settings:
Setting
Description
Cause Options Name
Type the preferred name for the Cause Options element.
Button
If selected, the buttons are displayed in bold font.
Size
Type the preferred width and height of the buttons.
Button (Alternate)
If selected, the buttons are displayed in regular font.
Size
Type the preferred width and height of the buttons.
Custom
If selected, the buttons are displayed in a custom font.
Size
Type the preferred width and height of the buttons.
Background
Select a background color for the buttons.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the buttons, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Layers pane, select No Thanks.
From the right pane, define the following Button settings:
Setting
Description
No Thanks Name
Type the preferred name for the No Thanks element.
Button
If selected, the button is displayed in bold font.
Size
Type the preferred width and height of the button.
Button (Alternate)
If selected, the button is displayed in regular font.
Size
Type the preferred width and height of the button.
Custom
If selected, the button is displayed in a custom font.
Size
Type the preferred width and height of the button.
Background
Select a background color for the button.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the button, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Amount
To configure the Select Amount page of the Donate component:
From the Layers pane, select Select Amount.
From the right pane, type the preferred name for the Select Amount page.
From the Layers pane, select Back Button.
From the right pane, define the following:
Setting
Description
Back Button Name
Type the preferred name for the Back Button element.
Button
If selected, the button is displayed in bold font.
Size
Type the preferred width and height of the button.
Button (Alternate)
If selected, the button is displayed in regular font.
Size
Type the preferred width and height of the button.
Custom
If selected, the button is displayed in a custom font.
Size
Type the preferred width and height of the button.
Background
Select a background color for the button.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the button, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Layers pane, select Amount Prompt.
From the right pane, define the following:
Setting
Description
Amount Prompt Name
Type the preferred name for the Amount Prompt element.
Primary Text
If selected, the prompt is displayed in large font.
Secondary Text
If selected, the prompt is displayed in medium font.
Custom
If selected, the prompt is displayed in a custom font.
Define the following Custom Text settings:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Justification - From the right of the color field, select a justification option.
Color - Select a font color. The HEX# for the selected color is displayed.
From the Layers pane, select Amount Options.
From the right pane, define the following:
Setting
Description
Amount Options Name
Type the preferred name for the Amount Options element.
Button
If selected, the buttons are displayed in bold font.
Size
Type the preferred width and height of the buttons.
Button (Alternate)
If selected, the buttons are displayed in regular font.
Size
Type the preferred width and height of the buttons.
Custom
If selected, the buttons are displayed in a custom font.
Size
Type the preferred width and height of the buttons.
Background
Select a background color for the buttons.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the buttons, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Layers pane, select No Thanks.
From the right pane, define the following:
Setting
Description
No Thanks Name
Type the preferred name for the No Thanks element.
Button
If selected, the button is displayed in bold font.
Size
Type the preferred width and height of the button.
Button (Alternate)
If selected, the button is displayed in regular font.
Size
Type the preferred width and height of the button.
Custom
If selected, the button is displayed in a custom font.
Size
Type the preferred width and height of the button.
Background
Select a background color for the button.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the button, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Custom Amount
To configure the Custom Amount page of the Donate component:
From the Layers pane, select Custom Amount.
From the right pane, type the preferred name for the Custom Amount page.
From the Layers pane, select Back Button.
From the right pane, define the following:
Setting
Description
Back Button Name
Type the preferred name for the Back Button element.
Button
If selected, the button is displayed in bold font.
Size
Type the preferred width and height of the button.
Button (Alternate)
If selected, the button is displayed in regular font.
Size
Type the preferred width and height of the button.
Custom
If selected, the button is displayed in a custom font.
Size
Type the preferred width and height of the button.
Background
Select a background color for the button.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the button, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Layers pane, select Donate Prompt.
From the right pane, define the following:
Setting
Description
Amount Prompt Name
Type the preferred name for the Amount Prompt element.
Primary Text
If selected, the prompt is displayed in large font.
Secondary Text
If selected, the prompt is displayed in medium font.
Custom
If selected, the prompt is displayed in a custom font.
Define the following Custom Text settings:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Justification - From the right of the color field, select a justification option.
Color - Select a font color. The HEX# for the selected color is displayed.
From the Layers pane, select Input.
From the right pane, define the following:
Setting
Description
Input Name
Type the preferred name for the Input element.
Background
Select a background color for the input field.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the input field.
Text (Placeholder)
For the Placeholder Text for the input field, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Text (User Input)
For the User Input Text for the input field, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Layers pane, select Confirmation. This element appears to enable the customer to confirm their donation.
From the right pane, define the following:
Setting
Description
Confirmation Name
Type the preferred name for the Confirmation element.
Button
If selected, the button is displayed in bold font.
Size
Type the preferred width and height of the button.
Button (Alternate)
If selected, the button is displayed in regular font.
Size
Type the preferred width and height of the button.
Custom
If selected, the button is displayed in a custom font.
Size
Type the preferred width and height of the button.
Background
Select a background color for the button.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the button, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Layers pane, select Keyboard.
From the right pane, define the following:
Setting
Description
Keyboard
Type the preferred name for the Keyboard element.
Preview Content Design
To preview the content design:
From the upper-right of the Content Designer, select Preview Content Design to see a preview in a separate browser window.
From Views in the upper-left, select a view of the content design to preview.