2. Customization: Adding Buttons & Links to Your Website
A WebsiteAlive How-To Guide
This document will highlight the steps you need to add call-to-action buttons to your website allowing your visitors to easily live chat with you
or your employees. In order to complete these steps you or your website developer must have access to your website pages on your server.
If you need further assistance, help or support, please feel free to visit us at
www.websitealive.com for more information.
3. Overview
In order to customize buttons and links, you must be logged into your Administrator account.
WebsiteAlive offers a few ways to utilize call-to-action buttons:
An Embedded Icon is a call-to-action button that is embedded within the webpage. When clicked, it opens a live chat or click-to-call
interface that is also embedded within the webpage (i.e., is not a pop-up window). The call-to-action and interface adheres to the side of
the browser window at all times, and can be placed on whichever side you prefer.
Note: Embedded Icons are the only call-to-action buttons that enable the tracking code.
Note: If you already have your code from previous Embedded Icon buttons, you WILL NOT need to reinstall the code.
Buttons are images that are placed statically in various parts of your pages. Unlike Embedded Icons, Buttons only allow a live chat or
click-to-call window interface as a pop-up. Otherwise, they work the same.
Links work exactly like Buttons but are only text links, created using a URL shortener. These are great for weaving into website text, the
body or signature of emails, or social media campaigns and postings.
Note: You may use all 3 methods above in a single page or single website, at the same time.
4. Customizing an Embedded Icon
1. Go to Basics > Websites, Code & Customize in the left menu.
2. On the right side of the screen, you will see four button options available to you.
Under Embedded Icon & Tracking Code, click Edit.
3. Once clicked you will see two areas; Settings and Code For Your Website.
Click Settings.
4. From here, click the state you’d like to edit (either Online or Online, New Activity)
and then click Upload/Choose below the sample button.
5. You’ll find yourself in the Image Gallery, where you can upload and select images.
Click Choose File and navigate your own folders and find the image you’d like
to use, and select Open. Then select Upload Image.
6. Once this action has completed, you will see your uploaded image in the list of
available call-to-action buttons. Press the Select button below the image you’d
like to use and click Save Settings to save.
5. Customizing Buttons
1. Go to Basics > Websites, Code & Customize in the left menu.
2. On the right side of the screen you will see four button options available to you.
Under Buttons, click +New.
3. Once the dialog box pops up, you will see two buttons:
Online - this is what the button looks like when
Operators/Agents are online.
Offline - this is what the button looks like when
Operators/Agents are offline.
4. Under the button you’d like to customize, click Upload/Choose.
5. You’ll find yourself in the Image Gallery, where you can upload and select images.
Click Choose File.
Continued on next page...
6. Customizing Buttons
6. Navigate your own folders and find the image you’d like to use, and select Open.
Then select Upload Image.
7. Once this action has completed, you will see your uploaded image in the list of
available call-to-action buttons. Press the Select button below the image you’d
like to use.
Note: Simply repeat the steps above for both your Online or Offline buttons.
8. You should now see your new button in the Settings area. Click Save Settings.
9. Now you will have to copy the code provided and paste this in the location you’d
like your button to appear in on your web pages.
7. Customizing Text Links / Shortcodes
1. Go to Basics > Websites, Code & Customize in the left menu.
2. On the right side of the screen you will see four button options available to you.
Under Links, click +New.
3. Once the dialog box appears, fill in the blanks:
Link Text - this is the text you’d like the link to say.
Connect To - this is the department you’d like the text link to connect with.
4. Click Save Settings, copy the code, and paste it anywhere you wish.
Shortcode URL - the URL shortener appears as a fine text link below the original
text link you created. Simply copy/paste this code and add it anywhere you’d
like: emails, Twitter posts, or wherever!
