Use a CoachLogix Button on Your Website

Want an easier way for your clients to access CoachLogix from your personal website? Follow these steps to embed a button anywhere into your site.

Embed a Code Snippet

Helpful Tip: Be sure to copy and paste this code exactly as it is into the HTML editor outside or within any element tags in your site. 

To learn more about basic HTML elements click here.

Embed this code snippet into any website within the <body></body> tags:

<link href="" rel="stylesheet">

    .coachlogix-button {
        font-family: 'Roboto', sans-serif !important;
        color: white !important;
        background-color: #336db4 !important;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        font-weight: 600;
        padding: 0 10px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        min-height: 36px;
        min-width: 88px;
        line-height: 36px;
        vertical-align: middle;
        align-items: center;
        text-align: center;
        border-radius: 2px;
        box-sizing: border-box;
        user-select: none;
        outline: none;
        border: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        background: transparent;
        color: currentColor;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 14px;
        font-style: inherit;
        font-variant: inherit;
        font-family: inherit;
        text-decoration: none;
        overflow: hidden;
        transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        letter-spacing: 0.01em;
<a href="" class="coachlogix-button">
    Add Link Name Here

Here is how you can add a snippet to your personal website:

  • Open up your HTML editor. 
  • Find the place within your code that you want to place the snippet.
  • To change the button's title replace the Add Link Name Here inside of the quotation marks within the <a> tag:<a href="" class="coachlogix-button">    Add Link Name Here</a>
  • Save the HTML document and upload to your website server.

You may also wish to add simple Click Here link to your website:

<a href="">Click Here</a>


Change the URL

You can edit the destination URL of a CoachLogix button to go to a page directly within the app OR  change the color of the button to match your branding.

If you want to change the destination of the button to another place, change the URL within this tag:

<a href="" class="coachlogix-button">

Just put the new URL within the quotation marks like this:

<a href="" class="coachlogix-button">

You can right click on the navigation links within the CoachLogix app to find direct URLs.

Button Color

If you want to change the colors of the button to match your branding change the colors within here:

background-color: #336db4 !important;

Add a new hexadecimal number (six digits) after the # or type in a basic color like white, black, grey, red, green, blue, yellow, etc.


Add the CoachLogix Logo

You may also add a CoachLogix logo to your website. Chose from the Full Logo or the Small Logo.

Right-click on the images below to save them to your computer.

Full Logo:

Small Logo:

In order to upload an image you must go into the image folder where you store your site's images and upload the logo

Use this code to upload the CoachLogix logo into your website:

<img src="...coachlogix-small.png" />

Replace the "...coachlogix-small.png" with the correct link.

To change the size of the image use this code:

<img src="...coachlogix-small.png" width="50%" />

Please Note: The code added, at the end of the tag, is the width set to 50%. This will shrink the image in half. 

You can change the number for the width of the image within the quotation marks followed by the percentage symbol.

You may wish choose to set the width using pixels by adding this code:

<img src="...coachlogix-small.png" width="100px" />

Helpful Tip: It is often better to shrink an image than to enlarge it so it does not pixelate.


Embed a Logo from a Live Image

If you do not wish to add the images to your website's folder and want to embed the image from a live image online, you may insert this snippet without the need to upload the images directly to your site.
To do this use these links:

Full Logo:

<img src="" width="300px" />

Small Logo:

<img src="" width="100px" />

If you want to make the logo clickable use this code:

<a href=""> <img src="" width="100px" /></a>

To learn more about Branding click here.

To learn more about CoachLogix Branding Guidelines click here.


Did this answer your question?