Introducing the Better Button

Kishan Emens
Better Blog
Published in
7 min readJun 6, 2019

Better is excited to announce its newest feature aimed at helping healthcare providers and their patients. By installing the Better Button on your website, your clients will be able to create their Better account — and get paid back by their health insurance— without ever having to leave your website. Preview how the Button is being used by Mindful Counseling.

How to set up the Better Button™

If you host your site through Squarespace, Weebly, Wix, Wordpress, or GoDaddy GoCentral, you can easily install the Better Button™ yourself. Find your website builder in the list below and follow the steps. If you have a custom website, read on to find out how you or your webmaster can install the Better Button™. At the end of the article, you’ll learn how to customize the Button’s location to better suit your website.

Squarespace:

Note: You will need to pay for a Squarespace Business, Commerce Basic, or Commerce Advanced plan in order to install the Better Button™. See this Squarespace article for more details.

  • Log into Squarespace
  • Select your website
  • In the left side bar, click Settings
  • At the bottom, click Advanced
  • Finally, click Code Injection
  • In the text box for Header Code, paste in your Better Button code:
<script src="https://getbetter.co/button_embed" type="text/javascript" defer></script>

If the guide does not work for you, please follow this tutorial found on the official Squarespace support documentation.

Weebly:

  • Log into Weebly
  • Click the icon Edit Website
  • In the top navigation bar, click Settings
  • In the left side bar, click SEO
  • In the text box for Header Code, paste in your Better Button code:
<script src="https://getbetter.co/button_embed" type="text/javascript" defer></script>
  • Click Publish to see the changes live on your site

If this guide does not work for you, please follow this tutorial found on the official Weebly support documentation. The process is the virtually the same except paste in our code instead of the Google Analytics code.

Wix:

Note: You will need to pay for any Wix premium plan and register a custom domain in order to install the Better Button. See this Wix help article for more details.

  • Log into Wix
  • In the left side bar, click Settings
  • Then, in Advanced Settings section, click Tracking & Analytics
  • Click + New Tool and select Custom from the dropdown menu
  • In the Code text box, paste in your Better Button code:
<script src="https://getbetter.co/button_embed" type="text/javascript" defer></script>
  • In the Name text box, enter “Better Button
  • Add Code to Pages: Select the option for All Pages, then select Load code on each new page from the dropdown
  • Place Code in: Select the option for Head
  • Click Apply to see the changes live on your site

If this guide did not work for you, please follow this tutorial found on the official Wix support documentation.

Wordpress:

  • Log into Wordpress and navigate to the Dashboard
  • In the left side bar, click Plugins and select Add New
  • Search for “Insert Headers and Footers” by WPBeginner and click Install Now on the first listing
  • Wait a second for the plugin to install and then click Activate
  • In the left side bar, click Settings and select Insert Headers and Footers
  • In the text box for Scripts in Header, paste in your Better Button code:
<script src="https://getbetter.co/button_embed" type="text/javascript" defer></script>
  • Click Save to publish your changes

If this guide did not work for you, please follow this tutorial made by the creators of the plugin Insert Headers and Footers.

GoDaddy GoCentral:

Note: GoDaddy GoCentral is the new platform for their website builder service. If you have the older Website Builder 6 or 7, please see the section below this one.

  • Log in to your GoDaddy account and open GoCentral
  • Click Edit Site
  • Scroll in the main view of your site to where you want to add a section, and click the plus button
  • Scroll to bottom of the Add Section panel, click Show More and click the HTML pane
  • In the side bar, add the following code to the Custom Code section:
<script>(function(){var script=window.parent.document.createElement('script');script.src='https://getbetter.co/button_embed';script.type="text/javascript";script.defer=true;script.async=false;window.parent.document.head.appendChild(script)})()</script>
  • Also, set the Forced Height attribute of the HTML pane to 0
  • Click the or Done at the top of the sidebar and then click Publish to see the changes live on your site

If this guide did not work for you, please follow this tutorial found on the official GoDaddy support documentation.

GoDaddy WebsiteBuilder:

Note: GoDaddy Website Builders 6 or 7 are the old platforms for their website builder service. If you have the newer GoCentral platform , please see the section above this one.

  • Log in to your Website Builder account
  • Click Edit site
  • Click the three-bar icon in the top right-hand corner of your screen and select Site settings
  • Select Site-wide code
  • Paste the following code snippet between the <head> tags:
<script src="https://getbetter.co/button_embed" type="text/javascript" defer></script>
  • Click OK and close the Site settings window
  • Click Publish to see the changes live on your site

If this guide did not work for you, please follow this tutorial found on the official GoDaddy support documentation.

Custom Website

To install the Button site-wide, place the following line of code in the <head> of your HTML so that it appears on every page:

<script src="https://getbetter.co/button_embed" type="text/javascript" defer></script>

This process will be different depending on the tools used to make the website, but it is installed very similarly to products like Google Analytics or Facebook Pixel. If you would like to only add the button on one page, you can insert the code anywhere in the <body> of your HTML.

Customizing the Better Button™

Customizing the location:

If the right side of your page is crowded, you can choose which side of the page to display the Button. Paste the configuration script tag above your Button Embed tag as shown in the example below:

<script type="text/javascript">
const BetterButtonConfig = { position: "left" }
</script>
<script type="text/javascript" src="https://getbetter.co/button_embed" defer></script>

Note: The default position is "right" and you do not need to add a configuration for this option to take effect.

Customizing as a tray:

If the bottom left or right of your page is crowded, you may want to change the Button to appear as a tab with a tray sliding from the side of your page. Paste the configuration script tag above your Button Embed tag as shown in the example below:

<script type="text/javascript">
const BetterButtonConfig = { style: "tray", position: "left" }
</script>
<script type="text/javascript" src="https://getbetter.co/button_embed" defer></script>

Note: In the example above, there is also a position configuration that makes the Button a tab and tray in the left position. You can mix and match these settings to your liking.

Customizing as a link:

If the look of the Button or tray does not match your site’s design, you can trigger the button to appear when a link is clicked or a button is pressed. Paste the configuration script tag above your Button Embed tag as shown in the example below:

<script type="text/javascript">
const BetterButtonConfig = { style: "link" }
</script>
<script type="text/javascript" src="https://getbetter.co/button_embed" defer></script>

The Button will no longer appear on your page and the window will only appear when some Javascript is triggered on a page. The following example shows how you can trigger the window on a link by modifying the onclick attribute on a link or div (<a> or <div>):

<a href="#" onclick="toggleBetterButton()">Toggle Button</a>

When this link is clicked, the window will open on your page. With this method, you can maintain the look and feel of your site’s design while still offering the new functionality.

Note: Like the previous example, you can customize the side that the window appears on using the position attribute.

Support

Need help getting the Better Button™ installed on your website? Have feedback or suggestions for improvements?

Contact providers@getbetter.co with any questions!

--

--