Image buttons are built to maintain your company’s brand standards. Designed to be flattened images that contain colors, fonts and images specific to your brand and will look clean and consistent across all technology platforms.
Step 1)
From the main Applications list menu in your Command.App builder, locate the application you want to edit and click the Edit button.
Step 2)
Navigate to the scene / menu you want to add or change buttons on and click Edit.
![](http://help.command-app.com/wp-content/uploads/2019/02/EditMenu-1024x291.jpg)
Step 3)
There is a tab halfway down your menu that says Widgets. Click it.
Step 4)
To add a button, you have two choices:
Preferred choice
- Image Button – An image that was created in a graphic editor (PPT, Photoshop, etc..) that you can use as a flattened image. The Command.App platform uses .PNG or .JPG format.
Alternative
- Label Button – If you know CSS, you can create a code based button that can be used.
Step 5)
If you select Image button, click the Add Widget button to the right.
This will add the button widget to a list below.
Step 6)
You are then able to click the orange button widget bar and it will open the configuration options.
![Add Image Button](http://help.command-app.com/wp-content/uploads/2019/02/ImageButton.gif)
- Select Image – Allows you to locate the piece of content you want to use for your button in your asset library. If it isn’t currently in your asset library, you can upload that image at this point.
- CSS Classes – This is the name you give your button to place it on your device. You will use this under the Scene or Application Stylesheet tab. EXAMPLE: main-menu-button or application-videos
- Requirements include:
- All lowercase letters
- No spaces, instead use a hyphen (-)
- Cannot use numbers to begin the title (419-spec-videos)
- Requirements include:
- Button Display Name – This is the name in you give your widget in the list. It is only visible by the organization administrator, so name it whatever you want!
- Action – What does this button do? This is where you set what the button does when you touch it.
![Actions](http://help.command-app.com/wp-content/uploads/2020/07/navigation-settings.jpg)
None
Go Back
Open A Collection
Go To A Menu
Go To the Home Menu
Send An Email
The image will do nothing when touched
Navigates back one menu from where you are.
Navigates to a content collection
Navigates to another scene/menu
Navigates to the Home / Main Menu
Allows the user to email whatever content you want attached to this button. You will select a pre-designed email template and the file you want to send.
Exit The Application
Open an External Website
Will exit out of your app and take you back to the Command.App app activation menu.
Will take you to a website from the app. This will not exit from the app, rather launch a browser inside the app.
Open Content Search & Lookup
Platform Upgrade – A toolset that users can quickly access any content item via a serial number (sku), item number or description. For more information, visit https://command-app.com/toolsets/
Open a Quote Builder
Platform Upgrade – A toolset that users can create quotes inside the app and deliver them to the client on-the-spot. For more information, visit https://command-app.com/toolsets/
Open a Cost Calculator
Platform Upgrade – A toolset that uses a pre-built calculator to compare against your competition. For more information, visit https://command-app.com/toolsets/
Open the Form History
Platform Upgrade – A toolset to view forms created in the field, specific to each user. For more information, visit https://command-app.com/toolsets/
Open the Sales Quote History
Platform Upgrade – A toolset to view submitted sales quotes, specific to each user. For more information, visit https://command-app.com/toolsets/
If you have added an image button and set the action tied to it, your steps are complete. Please review the CSS Themes article to understand your media query for your devices and learn how to place the button on your menu.
Create a Label button using CSS.
Step 1)
Select Label Button and click the Add Widget button to the right. This will add the button widget to a list below.
![](http://help.command-app.com/wp-content/uploads/2019/02/ButtonChoices.jpg)
Step 2)
You are then able to click the Label Button Widget and it will open the configuration options.
![](http://help.command-app.com/wp-content/uploads/2019/02/label_button-1024x347.png)
- Action – What does this button do? This is where you set what the button does when you touch it.
- CSS Classes – This is the name you give your button to place it on your device. You will use this under the Scene or Application Stylesheet tab. EXAMPLE: main-menu-button or application-videos
- Requirements include:
- All lowercase letters
- No spaces, instead use a hyphen (-)
- Cannot use numbers to begin the title (419-spec-videos)
- Requirements include:
- Button Display Name – This is the name in you give your widget in the list. It is only visible by the organization administrator, so name it whatever you want!
- Action – What does this button do? This is where you set what the button does when you touch it.
If you have added an your label button and set the action tied to it, your steps are complete. Please review the CSS Themes article to understand your media query for your devices and learn how to place the button on your menu.