Help Center – Contact Button Help Center – Contact Button
  • Home
  • About
  • Pricing
  • Log In
Sign Up
Help Center – Contact Button Help Center – Contact Button
Sign Up
Help Center – Contact Button Help Center – Contact Button
  • Home
  • About
  • Pricing
  • Log In
loading
  1. Home
  2. Articles
  3. Getting Started
  4. Setup Guide – How to Create a Button
Updated on March 6, 2025

Articles

  • Folder icon closed Folder open iconGetting Started
    • Setup Guide – Get Started in 15 Minutes or Less
    • Setup Guide – How to Create a Button
    • Setup Guide – How to Create a New App
    • Setup Guide – Creating New Workspaces
    • Setup Guide – How To Create a List or Menu
  • Folder icon closed Folder open iconApp Guides
    • App Setup Guide – Contact Forms App
    • App Setup Guide – Chat Widgets
    • App Setup Guide – Facebook Messenger
    • App Setup Guide – WhatsApp Business
    • App Setup Guide – Click-to-Call
    • App Setup Guide – Map Links
    • App Setup Guide – Website Links
    • App Setup Guide – HTML Embed
    • App Setup Guide – Business Hours
    • App Setup Guide – Social Links
    • App Setup Guide – Send Messages
    • App Setup Guide – Images & PDFs
    • App Setup Guide – Email Subscriptions
    • App Setup Guide – Reservations & Bookings
    • App Setup Guide – Lists & Menus
  • Folder icon closed Folder open iconWebsite Installation
    • Install on Cardd
    • Install on Ecwid
    • Install on Framer
    • Install on Ghost
    • Install on Google Tag Manager
    • Install with HTML
    • Install on Lightspeed
    • Install on Shopify
    • Install on Squarespace
    • Install on Wix
    • Install on Webflow
    • Install on Weebly
    • Install on WordPress
  • Folder icon closed Folder open iconIntegration Guides
    • Integrate the Tawk.to Chat Widget
    • Integrate the Crisp Chat Widget
    • Integrate the 2Chat Chat Widget
    • Integrate the Hubspot Chat Widget
  • Folder icon closed Folder open iconProduct FAQs
    • How do I remove the "⚡ by Contact Button" branding?
    • Why are my Buttons and/or Apps not displaying on my site?
    • How Do I Change Default Button & Menu Font?
    • Where do contact form responses go?
    • How do Contact Form app webhooks and callback URLs work?
    • Which countries & languages does Contact Button support?
    • Can I use the same kind of app multiple times in one button?
    • Can I have multiple buttons on same domain?
    • Do I need to have website development skills to use Contact Button?
    • How do I switch between workspaces?
    • Can I change my account email address?
    • How do I request a new password?
    • What happens when I go over a monthly plan limit?
    • Can I use a hyperlink to automatically open button menu?
  • Folder icon closed Folder open iconAccounts & Billing
    • What kind of support do you offer?
    • Accepted Payment Methods
    • Calculating Taxes
    • How Are Plan Limits Tracked?
    • How Do I Cancel My Subscription?
    • How To Find Your Billing History & Invoices
    • How Do I Upgrade My Account?
    • Is it possible to downgrade plans?
Getting Started

Setup Guide – How to Create a Button

Estimated reading: 7 minutes 12065 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

  • Carrd
  • Ghost
  • Shopify
  • Squarespace
  • Weebly
  • Wix

Still stuck? Click here to message us.

How can we help?

Was this page helpful? Yes No

CONTENTS

Powered By EazyDocs

© 2024 All Rights Reserved by Contact Button