Setup Guide – How to Create a Button

Estimated reading: 7 minutes 12255 views

You can easily create and add your Contact Button to a website without the need of a developer. Simply complete the following steps to publish one of your buttons on your website.

Step 1

Click on the Buttons icon in the side menu.

Step 2

Click the blue “+ Create New Button” in the top right of the Buttons table.

Step 3

Complete, at a minimum, the required fields that have a * next to the field name. Below you’ll find more information about every field on the create button page.

Button Setup Section

Button ID
This is the name that we’ll use in your list of buttons. You can call it whatever you want as it’s only for internal reference and end users won’t be able to see what it’s called.
Text on Button
This is the text that users will see when the left part of the button is displayed.

For reference on how this will look, in the default Button & Menu Design section you see on the right side of the page, you’ll see white text that says “Button Text” inside the dark blue section of the button.
Enable Menu Header
By default we include a colored header above the white part of the expanded white button menu. If you don’t want to show this in your menu, click the blue toggle to deactivate it.
Header Logo
If you’d like to include a small image or logo in your header, you can upload it here. Most users upload a square or circle image of their logo, but it’s totally up to you what to display in the top left corner of the header. You can also leave it blank.
Header Title
This optional field is typically a welcome message like “
Welcome! 👋”
Header Subtitle
This optional field is typically a welcome message like “How can we help you today?”

The text size for this field is smaller than the Header Title field. It’s up to you to choose which, if any, you want to use in your button menu.
Drop Shadow
In this dropdown field, we offer you three different shadow options for your button and menu design. Select between them and you’ll see the resulting shadow, if any, in the Button & Menu Designer on the right side of the page.

Colors & Fonts Section

Header & Button Text Background
To change the background color of your button text section as well as the top menu header, either click the dark blue color box to use a color picker or enter the six character color code of your choice.
Button Circle Background
To change the primary color of your circular button, click the lighter blue color box to use a color picker or enter the six character color code of you choice.
Text Color
To change the button text that shows up when your button is in expanded mode, click the white color box to use a color picker or enter the six character color code of you choice.
Font Family (Premium Feature)
If you have upgraded to our Pro or Max Plan, you have the ability to change the font that is used inside of your button on the app menu.

To select a font, simply click the blue “Select Font” button and then either search for your preferred Google Font name or page through the fonts. For easier reference, we display all the font names using their actual font design.

App Menu Section

Add/Remove Apps
By default, we automatically add all of your existing apps to any new button you create. If there’s an app you don’t want to add to this particular button, simply click the ‘x’ to the left of the app name displayed.

Display Options Section

App Menu Layout
We currently offer 3 different menu layouts —

Columns: This is the default option that looks similar to a smartphone screen with an App Icon and App Name below it.

Rows: This option includes an app icon on the left with every App Name & App Description to the right of the icon

Icons Only: This option only displays your app icons. This is sometimes a good choice if you’re using familiar icons, like links to your social media pages.
Location on Page
Most sites around the web have widgets like Contact Button in the bottom right corner of their pages, but if you’d like to display it in a different spot other than the default location, you can select it here.
Initial Status
This dropdown allows you whether to show your full contact button or just the circle part when a user visits any webpage that the button is located on.
Scroll to Reveal
If you don’t want to show your Contact Button to a user until they’ve scrolled down on site for a certain amount, you can set the number of pixels they need to scroll before we display it to them here.
Display Button on
If you don’t want your button to be displayed to users using a certain type of device, you can disable the button for specific devices by unchecking either of the two boxes.

Note 1: If you uncheck both boxes, nobody will see your button.

Note 2: Desktop devices include laptops.

Note 3: Mobile devices include tablets.
Sandbox Mode
This is more of an advanced option for those of you who would like to test your actual button on your website, but only make it visible to visitors from certain IP addresses when Sandbox mode is enabled.

If you’d like to know what your own IP address is for testing purposes, we recommend going to https://whatismyipaddress.com/. The IP address you need to copy and paste into the sandbox text box is the IPv4 one.
Enable Button
If for any reason you want to prevent a particular button from showing up on your website, simply click the blue toggle to disable the button and it will not be published anywhere on your site until you switch the toggle back to on.

Step 4

Once you’ve completed all the required fields above, you will have one or two save options available to you.

Option 1: Save
If you only have created one app in your account so far, this is the only option you will see. Go ahead and click it to finish creating your new button.
Option 2: Save Button & Change Menu Order
If you’ve created more than one app in your account and have also added multiple apps in the “Add/Remove App” field above, you’ll see a button that says “Save Button & Change Menu Order.

This button will save everything and then allow you to set a custom app order in your button’s menu screen.

You can learn more about menu orders in the help center article called: “Changing Your Button’s Menu Order”

Step 5

If this is the first button you’ve created for your site, you will need to add one line of code to your website to get it to display properly.

Don’t worry, it’s a fairly easy thing to do and we’ve created step-by-step guides for many of the most popular website building tools available today.

Click on the name of your website builder tool below to proceed. If you don’t see your tool below and you don’t know how to manually add HTML code to your website, please email us at support@contactbutton.com or reach out to us via the Contact Button located in the bottom right of your Contact Button dashboard.

Website Builder Installation Guides