Skip to main content

Web Builder Help

While working on your website, save your changes often! The "Save Changes" button is at the bottom of each page. Remember to save before navigating away from the page!

Photos, Logos, and Other Images • PDFs/Videos/Music • Links • PocketSuite Scheduling Widget • Social Media • Mobile Devices • Pages • General

Photos, Logos, and Other Images

PDFs/Videos/Music

PocketSuite Scheduling Widget

Social Media

Mobile Devices

Pages

General

Photos, Logos, and Other Images

Can I change the images in the template?

The images in the template cannot be changed. However, you can upload additional images to display within the main content area of any page. You can also upload images to the call-out box, located on the Set Profile page of the Website Builder, which will appear on every page of your site.

Back to top

My uploaded logo looks wrong on my website.

Check that your logo fits the size specifications of 100x80 pixels. If the original is very large, try resizing it to 100x80 pixels in an image editing program and uploading it again. Fotor.com is a free online image editor that is easy to use.

If the issue is that your logo's shape or general design doesn't look good to you when displayed at 100x80 pixels, one option is to delete it from the logo area and place it instead in the call-out box on the Set Profile page of the Website Builder. This box will automatically appear on every page of your site. A second option is to add the logo within the main content area on each individual page of your site.

Back to top

Does ABMP have photos I can use on my site?

Check out ABMP's favorite free stock photo websites listed here: /updates/blog-posts/10-free-stock-photo-websites

Back to top

How do I upload an image?

  1. First, make sure the image is saved on your computer, and is an acceptable size and format. Images cannot be larger than 256 KB or 800x600 pixels. If you need to resize it and do not have an image editing program, Fotor.com is a free online image editor that is easy to use. Read more about resizing images.
  2. In the Web Builder, click on Manage Pages, then click on the page you want to put the image on.
  3. In the Page Text box, place your cursor at the point in the text where you want the image to appear.
  4. Click on the Image button (this looks like a photo of mountains, and is located on the top line of buttons) to open the Image Properties popup. Click on the Upload tab in the popup window.
  5. Click on Choose File, locate the image on your computer, and select it.
  6. Click on Send It To The Server. This will upload your image and show it to you in a preview window, with options to adjust its width/height, alignment, and other properties.
  7. Make adjustments if you want to (see below for more information on these options) and then click OK.
  8. Click Save Changes before navigating away from the page.

Older versions of some web browsers may not support image upload. If you followed the steps above and still cannot upload the image, try updating your browser to the latest version.

Back to top

How do I resize an image so it looks better on my page?

First, it's important to understand that when you resize an image in the Web Builder, you are only changing its display size, not its actual size. In other words, if you upload a 256 KB, 600x600 pixel photo, and then resize it in the Web Builder to 150x150 pixels, it will appear much smaller on the page, but its actual size is still 600x600 and the amount of storage space it takes up is still 256 KB. Large images can be very slow to load, especially if the person viewing your website has a slow Internet connection. Similarly, if your image's actual size is very small and you change its display size so it looks bigger, the image will look blurry and low-quality because it is trying to stretch the same amount of information over a bigger area.

For this reason, if you need to make an image much bigger or smaller, it's best to resize it properly in an image editing program like Adobe Photoshop first. If you do not have an image editing program, Fotor.com is a free online image editor that is easy to use. Save the new version of the image and upload it to the Web Builder. Minor adjustments to fine-tune its display size can then be made in the Web Builder if necessary.

To resize an image in the Web Builder:

  1. Click on Manage Pages, then click on the page where the image is located.
  2. In the Page Text box, select the image you want to resize, and open its Image Properties popup. You can do this by double-clicking on the image; or right-click on it and choose Image Properties; or select it and click on the Image button.
  3. Make sure the Lock Ratio icon (the small padlock) is set the way you want it. When the padlock is open, you can change the image's width and height separately to squash or stretch the image. When the padlock is closed, changing just one will automatically change the other so the resized image stays the same shape. Click on the padlock to open or close it.
  4. Enter a new size in the Height field, the Width field, or both.
  5. If you change your mind and want to go back to the original size of the image, click the Reset button (the small circular arrow).
  6. When you are done, click OK.
  7. Click Save Changes before navigating away from the page.

Back to top

How do I wrap the text around an image?

  1. Click on Manage Pages, then click on the page where the image is located.
  2. In the Page Text box, select the image you want to adjust, and open its Image Properties popup. You can do this by double-clicking on the image; or right-click on it and choose Image Properties; or select it and click on the Image button.
  3. In the drop-down menu under Alignment, the default setting is "not set." Change this to "Left" or "Right" to make the photo appear on that side of the page with the text wrapped around it.
  4. The preview image will show your photo's new alignment with placeholder Latin text around it. This text is only there as a standardized example and will not appear on your page. (If your photo is very large and already takes up the whole preview window, the preview might not seem to change at this step.)
  5. To change the amount of space between the image and the text, use the HSpace (Horizontal Space) and VSpace (Vertical Space) fields. If there is nothing in these fields, start by entering 5 in each field and see how the preview image changes. Try smaller or larger numbers until it looks the way you want.
  6. When you are done, click OK.
  7. Click Save Changes before navigating away from the page.

If the text is wrapping around the image, but not as neatly as you would like, this may be because your text contains unusual font sizes, alignment, spacing, tables, or other formatting that will make it wrap strangely. Try adjusting the text formatting to see if this is the reason for the problem.

Back to top

How do I put a border on an image?

  1. Click on Manage Pages, then click on the page where the image is located.
  2. In the Page Text box, select the image you want to adjust, and open its Image Properties popup. You can do this by double-clicking on the image; or right-click on it and choose Image Properties; or select it and click on the Image button.
  3. Enter a number in the Border field and see how the preview image changes. Start with 1 and go up from there until the border looks the way you want.
  4. When you are done, click OK.
  5. Click Save Changes before navigating away from the page.

Back to top

I added an image and now the whole page is distorted.

The image is too big for the template. Resize your image to better fit within the template.

Back to top

I added an image and I can see it if I view my website in Firefox, but not in Internet Explorer.

One possible reason this may happen is when the image uses the CMYK color model instead of the RGB color model. CMYK color is designed for print and may not display correctly online. To convert a CMYK image to RGB, use an image editing program like Adobe Photoshop, or a free online converter like www.cmyk2rgb.com. Save your new image and upload it again to your website.

If this doesn't appear to be the problem, try a "save as" with the image and ensure the extension is valid (e.g., if the image is a jpg, save it with the extension .jpg or .jpeg; if it is a gif, save it with the extension .gif). Sometimes simply resaving the image and uploading it again will solve the problem.

Back to top

I uploaded an image from my phone and it displays sideways.

When you take a photo with your phone, many phones add information about the photo's original orientation, and preserve that orientation when you upload the photo directly from your phone to the Internet. To solve the problem, edit and re-save the photo before uploading it. If you do not have an image editing program, or can't edit the photo on your phone, use a free online image editor such as Fotor.com to rotate the photo and save a new version.

Back to top

PDFs/Videos/Music

How do I add a PDF to my site?

  1. Click on Manage Pages, then click on the page where you want the link to the PDF to appear.
  2. In the Page Text box, select the text that you want to make into a link to the PDF.
  3. Click the Link button. This is near the end of the second row of buttons, and looks like a small chain.
  4. A popup window will appear. Click on the Upload tab in the popup window.
  5. Click on Choose File, locate the PDF on your computer, and select it.
  6. Click on Send It To The Server.
  7. Click OK.
  8. Click Save Changes before navigating away from the page.

If you want to have more than one link on your site to the same PDF, there is no need to upload it again each time. Simply follow steps 1-3 above, then click on Browse Server to choose your previously uploaded PDF.

Back to top

How do I add a video to my site?

  1. Find or upload the video on YouTube. Videos must be on YouTube before you can add them to your site.
  2. In the Web Builder, click on Manage Pages, then click on the page where you want to add the video.
  3. At the bottom of every page, you will see an "Add Video" link. Click it and you'll see instructions and a field for adding the video's YouTube code.
  4. Select whether you want it to appear on the left or right side of your page. Some templates look better with the video on the left, others on the right.
  5. Click Save Changes before navigating away from the page.

You can also use the default Videos page, which includes ABMP client education videos. Choose-and-use the provided ABMP videos or add your own!

Back to top

Can I add music to my site?

You cannot add auto-playing background music on your website. The Website Builder does not allow this due to the large file space required. However, you can add a link to a music file hosted somewhere else. This will not play automatically but clients will be able to download the file. Upload the file to an outside source, such as Dropbox.com, and then create a link to that file on your website.

Back to top

  1. Copy the URL (website address) you want to create a link to.
  2. In the Web Builder, click on Manage Pages, then click on the page where you want the link to appear.
  3. In the Page Text box, select the text that you want to make into a link.
  4. Click the Link button. This is near the end of the second row of buttons, and looks like a small chain.
  5. A popup window will appear. In the URL field, paste in the website address.
  6. Optional: Click on the Target tab to select your preference for how the link will open when someone clicks on it (e.g. to make it open in a new browser window).
  7. Click OK.
  8. Click Save Changes before navigating away from the page.

Back to top

How do I add a link to text further down on the same page?

This is done with the Anchor button.

  1. Click on Manage Pages, then click on the page you want to edit.
  2. In the Page Text box, scroll down and place your cursor in front of the text or image that will be the target of your link. Note: you are not selecting the text, just putting your cursor at the place on the page you want to jump to.
  3. Click the Anchor button. This is at the end of the second row of buttons, and looks like a flag. A popup box will appear, asking you to name this anchor. Pick a simple descriptive name and click OK. The anchor name will not be visible on your website.
  4. A small flag icon will appear in your page text. This will not be visible on your website either.
  5. Now you will make a link to this anchor. Scroll back up the page and select the text that you want to make into a link.
  6. Click the Link button.  This is near the end of the second row of buttons, and looks like a chain.
  7. A popup window will appear. Under Link Type, choose "Link to anchor in the text", then choose your anchor from the "By anchor name" list.
  8. Click OK.
  9. Click Save Changes before navigating away from the page.

Back to top

How do I link to another page on my own site?

This is done in the same way as adding an ordinary link. Follow the steps in How do I add a link on my page? and just use the URL of the page you want to create a link to.

Back to top

PocketSuite Scheduling Widget

How do I add the ABMP PocketSuite scheduling widget to my website?

Adding PocketSuite widgets to Websites Built on ABMP Web Builder

Online booking, online lead forms, online chat, and online payments are all available as part of the ABMP Edition. You can install the widgets for these links onto a website built on the ABMP Web Builder using the following steps.

Start to add your widgets by getting the widget code snippet to install on your website. Below is the code for each widget, where it says USER_ID, you’ll use your username. Head to Settings > Profile > Username. If it’s empty, time to make one special for your business! You can also see it in your email with instructions.

For more advanced instructions, check out these articles for the booking, lead form, and payment widgets. Once you have the HTML code, follow these steps to add the widgets to your website.

Once you log into your account at abmp.com, scroll down to find Website Builder. From here, select Set Profile. Under the section “Code for Third Party Widgets,” add the code for the widgets you wish to install, skipping a line between each. You can also add code to individual pages by going to Manage Pages on the Website Builder webpage.

Note: There are restrictions to adding widgets to a website built on the ABMP Web Builder.

  1. You can always add the chat widget, but due to space constraints, of the online booking, online lead forms, and online payment widgets you can only add two of the three. Typically the online payments widget is not posted on a website.
  2. To add the widgets, you must set the "Social Media Location" to "Under Tag Line" which will center your widgets near the top of the page. It is necessary to choose this location as the others will not work.
  3. Adding HTML code to your website is an advanced setting, for a simple way to add your booking page, feel free to hyperlink your unique booking page anywhere on your website!

Here is an example of adding the online booking, lead form, and online chat widgets.

Code for Third Party Widgets

This field is for website code you've received from a third-party to add functionality to your website (for example, multiple code blocks can be combined in this field, separated by a blank line).

Please note! While this box can be used for third-party widgets, like a "Book Now" button, space is limited. If the third-party code/image/widget is too large, it will distort and/or break your website. You will need a smaller option for the image, or try adding it to the Specials/Call-out Box field above.

THIS IS AN ADVANCED SETTING. You must exercise caution to ensure you are pasting the right code and ONLY the code exactly as it was given to you. Failure to do so may result in your site rendering improperly or not displaying at all. Please be careful.

<script src="https://book.pocketsuite.io/static/javascript/widget.js?id=tarastrainin…;

<div id="ps-book" data-book="tarastraining" data-color="#5cb85c"></div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script&gt;

<div id="ps-book" data-lead="tarastraining" ></div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script&gt;

Back to top

Social Media

How do I add a Facebook "Like" button to a page on my website?

The first part of this process is adding the Javascript code provided by Facebook to your Set Profile page, by following these steps:

  1. Copy your website address.
  2. Go to https://developers.facebook.com/docs/plugins/like-button and scroll down to Like Button Configurator.
  3. Paste your website address into the "URL to Like" box.
  4. Choose the button style you want from the "Layout" box. Check the appropriate boxes if you also want to show the faces of people who like your page, or to include a Share button.
  5. Click "Get Code." A popup window will open, with two separate sections of code.
  6. Copy the code from the first section, where it says "Include the JavaScript SDK on your page once." Don't close this window because you will need to come back to it later.
  7. Go back to the Web Builder, and go to the Set Profile page. Paste this code into the Mobile & Social Media Code box.
  8. Remember to click the Save Changes button. Nothing will show up on your website at this point. Continue to the next part of the process described below.

After adding the code to your Set Profile page, you must add the Like buttons individually to whichever pages you want them to appear on:

  1. Copy the code from the second section, where it says "Place this code wherever you want the plugin to appear on your page."
  2. Go back to the Web Builder, click on Manage Pages, and go to any page where you want to add your Like button.
  3. In the Page Text box, click the Source button.
  4. Paste the code at the end of the page's existing content, or wherever you want it to appear.
  5. Look carefully at the code you just pasted in. There will be a line that shows your website address. Edit it to the address of the specific page you are adding the button to. For example, if your website address is myname.abmp.com, and you are adding this button to your Hours & Scheduling page, change the website address in the code to myname.abmp.com/hours-and-scheduling. This means anybody clicking on the button will "like" your Hours & Scheduling page on Facebook.
  6. Click the Save Changes button.
  7. To add a button to another page, so people can "like" that page, simply go to the next page in the Web Builder where you want to add a button, and repeat from step 11. You do not need to get new code from Facebook each time. Just make sure you edit the website address to the correct page address for each new button you add.

Back to top

How do I add a Facebook "Share" button to a page on my website?

Note: To add both a "Like" and "Share" button to your page at the same time, follow the steps described above for "How do I add a Facebook Like button?"

The steps below should be used if you want only a "Share" button. The first part of this process is adding the Javascript code provided by Facebook to your Set Profile page:

  1. Copy your website address.
  2. Go to https://developers.facebook.com/docs/plugins/share-button and scroll down to Share Button Configurator.
  3. Paste your website address into the "URL to Share" box.
  4. Choose the style of share button you want from the "Layout" box.
  5. Click "Get Code." A popup window will open, with two separate sections of code.
  6. Copy the code from the first section, where it says "Include the JavaScript SDK on your page once." Don't close this window because you will need to come back to it later.
  7. Go back to the Web Builder, and go to the Set Profile page. Paste this code into the Mobile & Social Media Code box.
  8. Remember to click the Save Changes button. Nothing will show up on your website at this point. Continue to the next part of the process described below.

After adding the code to your Set Profile page, you must add the share buttons individually to whichever pages you want them to appear on:

  1. Copy the code from the second section, where it says "Place this code wherever you want the plugin to appear on your page."
  2. Go back to the Web Builder, click on Manage Pages, and go to any page where you want to add a Share button.
  3. In the Page Text box, click the Source button.
  4. Paste the code at the end of the page's existing content, or wherever you want it to appear.
  5. Look carefully at the code you just pasted in. There will be a line that shows your website address. Edit it to the address of the specific page you are adding the button to. For example, if your website address is myname.abmp.com, and you are adding this button to your Hours & Scheduling page, change the website address in the code to myname.abmp.com/hours-and-scheduling. This means anybody clicking on the button will share your Hours & Scheduling page on Facebook.
  6. Click the Save Changes button.
  7. To add a button to another page, and make it share that page, simply go to the next page in the Web Builder where you want to add a button, and repeat from step 11. You do not need to get new code from Facebook each time. Just make sure you edit the website address to the correct page address for each new button you add.

Back to top

Can I add "Share" buttons for several social media sites, not just Facebook?

Yes. One way to do this is to visit https://platform.sharethis.com/get-inline-share-buttons and sign up (it's free!) to get share buttons for all of the most popular social media sites.

  1. Go to https://platform.sharethis.com/get-inline-share-buttonsl.
  2. Select as many options as you want on this page. You can re-order the buttons, select the alignment, button size, labels, extras, and shape of the buttons.
  3. We recommend selecting the Small button size and no labels.
  4. When you are done picking your options, click the green "Register & Get the Code" button.
  5. You will be prompted to register by entering your domain name (for example, yourdomainname.com), email address, and create a password, then submit the form.
  6. Next, you will see two separate boxes of code. Copy the code from the first box and paste it into your Mobile & Social Media Code field, found on the Set Profile page of the Web Builder. Remember to click Save Changes.
  7. Now copy the code from the second box. Paste this where you want the buttons to appear on your site. For example, if you want the buttons to appear on every page of your website, you could add them to the call-out box: Go to the Set Profile page, click on Source in the call-out box field, and paste the code there. If you want the buttons to only appear on a certain page of your website, go to the Page Text field on that page, click the Source button, and paste the code there. Remember to click Save Changes.

Back to top

When I share a page on Facebook, the thumbnail that shows up on Facebook doesn't look like the page I shared, or shows text from an older version of my page.

For example, a link to a specific page of your website might show only your logo and home page in the thumbnail. Unfortunately, this is not something that can be changed. The way Facebook displays website links is not related to your own website settings.

Back to top

Mobile Devices

How do I make my website mobile-friendly?

Most of ABMP's templates are mobile-friendly, which means your website will automatically switch to a mobile version when it's viewed on a phone or tablet. You don't need to change any settings to make this happen.

A few templates have not yet been converted for mobile use. These are marked "not mobile friendly" on the Select Template page in the Web Builder. You can change to a new template at any time without losing any of the content you have already added to your website. If you prefer one of the templates that is not yet mobile-friendly, you can consider using a third-party vendor like Dudamobile to redirect mobile viewers to a converted version of your website.

Back to top

I use a third-party mobile site converter (e.g. Dudamobile). When I look at my website on a mobile device, I can see the desktop version briefly before it changes to the mobile version.

This can happen with certain vendors whose code is designed to redirect your website before your page finishes loading. To fix this problem, go to the Set Profile page in the Web Builder, remove your mobile vendor's code from the Mobile & Social Media box, and put it in the Google Analytics box instead. If you already have Google Analytics code in that box, add your mobile vendor's code at the top of the box, before the Google Analytics code, not after it. Don't forget to click Save Changes.

Note: If it's been a few years since you first created your ABMP website, there's a good chance you don't need a third-party mobile converter any more! Most of ABMP's templates are now mobile-friendly. Click on Select Template in the Web Builder to view all templates and see which ones are currently mobile-friendly.

Back to top

My website looks good on my desktop computer, but not on my phone or tablet.

The two most common reasons for this are:

  1. You are not using one of ABMP's mobile-friendly templates. Click on Select Template in the Web Builder to view all templates and see which ones are currently mobile-friendly.
  2. You are using a mobile-friendly template, but have added tables to your website.

Tables override mobile-friendly design. The rest of the page will resize properly, but the table won't. This throws everything else out of place. This is not an ABMP-specific problem; tables have always had this effect on mobile devices. The best solution is "Don't use tables." But if you need to use tables, the following steps will improve their ability to resize:

  • Remove any width/height settings from the table. To check this setting, you can right-click on the table in the Web Builder and choose Table Properties. If there is a number in the width and/or height field, remove that number.
  • If you have images inside the table, remove any width/height settings from each of those images. To check this setting, you can right-click on the image in the Web Builder and choose Image Properties. If there is a number in the width and/or height field, remove that number. This will allow the image to resize appropriately on a mobile device. If removing the image's width/height makes the image look too big, see "How do I resize an image so it looks better on my page?"

Back to top

Pages

Set Profile page: What is the Google Analytics Code box?

Google Analytics is a useful business tool that allows you to track statistics for your website. It provides a great deal of information about how many visitors use your site, how they found it, and much more. To use this feature, first sign up for a free or paid Google Analytics account if you do not already have one. Copy the unique code provided by Google for your account, and paste it in this box.

Back to top

Services & Rates page: How do I add a service that isn't in the dropdown menu?

If your modality isn't listed in the menu, and/or the table isn't useful to you, simply don't add any services. If you already have added one, but don't find the format convenient for your needs, delete it by clicking the red X, and use the text box to input your information. You can still set up Services and Rates in a table format, using the Insert Table tool, if you prefer.

Back to top

Hours & Scheduling page: My office is open from morning to evening without a lunch break, so the schedule table is messed up. What do I do?

If you want to set your hours for the whole day, rather than breaking them up between a.m. and p.m., just use the "morning" fields and ignore the "afternoon" fields, leaving them blank.

Back to top

General

I have my own domain name, which I purchased separately. How do I use this domain name for my ABMP website?

If you want your ABMP website to use a separately purchased domain name, this can be done with a redirect. To set up a redirect through your registrar (Godaddy, Enom, Network Solutions, etc.), select the "Forwarding," "Domain Forwarding," or "URL Forwarding" option, and then enter your ABMP website address (name.massagetherapy.com or name.abmp.com). Anybody visiting your purchased domain name will be automatically redirected to your ABMP website address.

The other typical method, DNS routing, is not possible with your ABMP website. This is because DNS routing requires domain server information, and your ABMP website address is a subdomain of ABMP's main website, not a separate domain in itself. If your registrar doesn't support redirects, you will first need to transfer the domain name to a host that does.

Back to top

Why aren't my changes saving?

The Save Changes button is at the bottom of each page. You must click it before you navigate away from the page for your changes to be saved.

If you clicked Save Changes, but still can't see the change on your live website, try refreshing your browser window when you are looking at the live page. In most browsers, the Refresh or Reload button looks like a small circular arrow, somewhere in the address bar.

Back to top

When I add text and I hit return, it automatically adds a double line break, but I want a single line break.

To make a single line break when typing in the Page Text box, hold down the Shift key on your keyboard while you hit return.

Back to top

Where do I add the code to display my full online scheduling information?

Click on Manage Pages, and go to the Hours & Scheduling page. Paste the code provided by your vendor into the Online Scheduling Module box, and click Save Changes at the bottom of the page.

Back to top

How do I make the link to my online scheduler (or another JavaScript item) appear on every page of my website?

Go to the Set Profile page of the Web Builder, and paste the code provided by your vendor into the Mobile & Social Media Code box. Then, use the Social Media Location options below the code box to choose where you want it to appear on your site. Depending on what the code is trying to display, it might not look equally good in all four possible locations, so try each location in turn and look at your site to see which you like best. For large or lengthy items, "Under Sidebar Menu" or "Page Footer" will often be the best locations to choose.

Back to top

When people go to my website, their browser warns them it's not a secure site, or that there's a problem with its security certificate. What does this mean and how can I fix it?

Your ABMP website meets current security standards. However, this warning may appear when people go to your site using the old form of its website address, beginning with http instead of https. We updated our hosted websites to the newer, more secure https format in early 2017. This was necessary because of changes in the way search engines and browsers decide whether a site is secure. People can still get to your site using the old version of the address, but when they get there, their browser may not be able to read the site's security certificate, and this makes the browser think the site is insecure.

What this means for you: Whenever you direct clients to your website, make sure you are giving them the newest version of the address, which begins with https and does not include www. For example, it should look like https://lakeside.massagetherapy.com, rather than http://www.lakeside.massagetherapy.com. If you have links to your site in online directories such as Yelp, or in other places online, it is worth checking and updating those links.

What if you're going to the secure version of the address but still get a security warning? The most common reason for this is that you have added images and/or scripts to your website that still have an insecure http address in them somewhere. This is most likely to happen if you have added something from a third-party vendor; for assistance, contact whoever supplied that code. If you are still having trouble, please contact ABMP.

Back to top