Setup Guide – Get Started in 15 Minutes or Less

Estimated reading: 12 minutes 1211 views

Welcome to ConactButton.com! It’s great to have you here. As we know you want to get everything setup as easily and quickly as possible, we’ve created this Setup Guide to show you how you can have a Button with 1 or 2 Apps live on your site in under 15 minutes.

In most cases, this can be done without the need of a website developer. You can make your Contact Button as unique as you want, but for this guide we’re going to walk you through the three key stages needed to have a working button on your own site.

If you’re more of a visual learner, we’ve also created a YouTube Video that walks you through all the steps below.

Stage 1 – Create Your First App

Step 1
Select a first app to create from any of the apps listed on the Create App page.

Note: Please visit contactbutton.com/widget-apps if you’d like to learn more about any of the apps.

Step 2
In the “App Setup” section, make sure to give your new app a Display Name. This will be shown to users if you have a row or column button layout as well as be used as your internal name for the app.

If you use the row layout, make sure to also fill out the App Description field, otherwise we’ll display text that says “Null” instead.

Step 3
Each app has a different setup flow. We’ve tried to make it as intuitive as possible to complete the fields, but here are links to detail setup instructions for every app we currently offer in alphabetical order.

Step 4
In the “Icon Design” section of every app, you’ll find the fields listed below.

App Icon
We provide you with a default app icon plus over our 500 different Font Awesome icons to choose from.

To change the default icon we’ve selected for a particular app, just click the “Search Icons” button to open up an icon selector popup box. Click the icon you want and we’ll automatically change the current selection for you.

Or if you’d prefer to have a custom app icon, simply click the Custom button and then upload an app icon of your choice in JPG or PNG format.
Background Color
If you decide to use an App Icon in the previous step, you can set any color you want as a background by clicking on the colored box to open a color picker or by entering a 6 character hex value in the box to the right of it.
Border
By default, we don’t add any borders or drop shadows to icons, but if you’d like to add one, click the drop down box to add one. All you need to do is select a color from the color fields that show up once you change from the default of “No Border”.

Step 5
In the “Display” section of every app, you’ll find the fields listed below:

Add to Button(s)
By default, any time you create a new app, we add it to any of your existing buttons. If you do not want to add the app you’re creating to a button, just click on the x to the left of the button’s name.

Note: You can always add apps to button’s you skipped in this step by editing the button and adding a button in this same field by clicking the blue “+” button.
Show on Device
If you don’t want an app to be displayed to users using a certain type of device, you can disable the app for specific devices by unchecking either of the two boxes.

Note 1: If you uncheck both boxes, nobody will see the app.

Note 2: Desktop devices include laptops.

Note 3: Mobile devices include tablets.
Enable App
If for any reason you want to quickly prevent a particular app from showing up in any of your buttons without having to delete it, simply click the blue toggle to disable the app and it will not be displayed anywhere until you switch the toggle back to on.
Show at all times
Since some apps allow people to contact you directly, like “Click-to-Call”, we offer you the ability to decide the hours of the week that an app is visible to your website visitor.

If you decide to set custom hours, you just have to adjust the blue part of the slider to the times you want it to display. We will hide the app outside of these times.

Important Note: The times are based on the time zone you have selected in the “Location” tab found on your Settings page, so please make sure you adjust that setting if you want to use this feature.

If for example, you don’t want an app to show up on the weekend, all you have to do is click the two arrows on the right of the slider to turn off all minutes of the day.

Or if you want to disable an app outside of business hours, just drag the two sliders to a start and finish time.

Stage 2 – Setup your first button

Step 1
Complete, at a minimum, the required fields that have a red * 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 2
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.

Stage 3 – Create Additional Apps (Optional)

Now that you’ve created your first button and have an idea of how easy it is to create a Contact Button app, you can either proceed to Stage 4 and install your button with one app on your site, or you can take some extra time to add as many new apps to your button as you’d like.

All you need to do to create a new app is to click the “Add New” button in your dashboard’s menu and then select “New App”.

As a reminder, if you need guidance in setting up any new app, we’ve linked to all 15 setup guides above. Otherwise, there is also a link to an app’s specific setup guide on the top of the app creation page right under the page title.

Stage 4 – Test & Install Button

Step 1
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

🏁 And that’s it! 🏁

Your button should now live on your site and you can continue to modify it how you see fit. As a next step, we recommend adding a bunch more apps to see which ones your website users enjoy clicking on. Those kinds of insights can always be found on your Dashboard’s Homepage.

If you have any questions about setting up your first, you can always reach us via the Contact Button found in your dashboard.

We also have articles for the other parts of the dashboard that aren’t needed to complete the setup, so please make sure to check those out as well.