When editing your Welcome Page, you have the ability to add buttons as quick links. You will see these as 'Register Now' or 'Enroll Now' in the various snippet examples on the left side of the page when editing. If you need to edit an existing button, or create a new one, please follow the steps below.
Please note that any changes can not be undone so please be sure to verify where you want the button before starting this process.
Select Edit Page at the bottom of your Welcome Page to access the Snippets menu on the left. Note: You must be logged in on the Admin side, and have the appropriate user permissions in order to see the Edit Page button.
Using Snippets
The snippets menu contains multiple layouts that include buttons.
- Click and drag a snippet with a Button(s) to your Welcome Page body.
- Hover over the Button(s) to update Link and Text.
Adding Buttons to Existing Snippets
In order to add Buttons to an existing snippet you will need to copy and paste the HTML code.
First, copy desired code below:
- White Button w/border - <a href="#" class="btn btn-default edit">Request Care</a>
- Blue Button - <a href="#" class="btn btn-primary edit">Enroll</a>
- Double White Button - <a href="#" class="btn btn-default edit">Request Care</a> <a href="#" class="btn btn-default edit">Request Care</a>
- Double Blue Button - <a href="#" class="btn btn-primary edit">Enroll</a> <a href="#" class="btn btn-primary edit">Enroll</a>
Second, paste the code:
- Place your cursor on the desired snippet and click.
- Select the <> icon on the side of the snippet.
- Locate the area in the code where you would like your button to appear. Note: HTML code for Buttons is typically inserted at the end of the code just before the closer (</div). However, you can insert the code anywhere within the body as it makes sense.
- Paste the code (i.e. use Ctrl + V)
- If desired, you can delete the highlighted areas above to add a different title to your Button.
- Click Ok to save.
- Your Button(s) will appear on the page.
- If you would like to move your Button, click your cursor at the front of your Button and use the space bar or backspace key. You can adjust this way to eliminate gaps or awkward spaces.
Custom Colored Buttons
In order to create a custom colored button, you will need the RGB code for the color you would like the button to have and the HTML code for the button. In order to use this method, you must have an existing button in a snippet as outlined above.
RGB Codes - Google Color Picker Extension or Online Chart
HTML Button Code
class="btn btn-primary" original-title="" title="" _blank"="" style="background-color: rgb(56, 183, 117);"
Code Location
Copy the button code above and paste into your HTML code by placing your cursor in the snippet text and clicking the <> icon on the snippet in which you would like the button to appear. The location should look similar to the entire code below but only the highlighted code needs to be replaced. You can then update the RGB code as well.
<a href="https://trainingdb.ce.eleyo.com/courses/category/117/outdoor-recreation" class="btn btn-primary" original-title="" title="" _blank"="" style="background-color: rgb(56, 183, 117);">Login/Create an Eleyo Profile</a>
Generic Links to Locations on a District Public Site
When districts are updating their Welcome Page or Public Side, they may want to use deep linking to create a seamless experience for their families. Below is a table of the URL Paths that can be added to the end of their Public URL.
Name | Path | Purpose |
Create Account |
/account/register |
Directs to the Register a New Account screen |
Sign In |
/account/login |
General sign in screen. Might not be needed as Eleyo will ask them to sign in if they are not. |
Edit Relationships |
/account/relationships |
Could be helpful for customers that want families to upload pictures, to populate additional information about their child (grade, special needs, etc) |
Manage (Program Name) Account |
/account/child-care/(program-name) (copy URL) |
Allows for a direct link to the Child Care Account page, select your contract from here to make a payment, schedule change, etc. |
Account History |
/account/history |
Payments, invoices, across all programs that use Eleyo within the district etc |
Saved Payment Method |
/account/saved |
Add a saved payment method (might be nice to provide additional context to their families if linking directly to there) |
Instructor Rosters |
/account/teaching |
For Instructors to quickly access rosters. Instructors will need to log in using the email address associated with their Eleyo profile |
Link to automatically start an email |
mailto: followed by the desired recipient email address |
If staff are looking for a way to create a link that will start an email to a specific address, they can use this set up. |