When editing your Welcome page, you have the option to add linked buttons to guide your community. When editing the Welcome page, these buttons display text like Register Now or Enroll Now in the Welcome Page snippet examples on the left side of the screen. You can customize both the text and the links on these buttons. Additionally, you have the option to create custom buttons using HTML. Below, you'll find instructions for adding buttons and additional ideas for useful button links.
Note: Once changes are made and saved, there is not a way to revert to a previous version.
Adding a New Button
- Log into your Admin Dashboard.
- Navigate to your Welcome Page using the Go to Online (with the tv/monitor icon in the top left blue toolbar).
- Scroll to the bottom of the page and select the Edit Page button.
- The Snippet menu will appear on the left hand side of your screen.
- Select and drag a snippet with a button(s) from the Snippets menu to your Welcome page body.
- Hover over the button(s) then select Edit Link. Note: If using Chrome as your browser, you may need to use the zoom feature to enlarge the browser to be able to access the icon. Use the Text field to enter the desired text that will be visible on the button. It can be helpful to select the New Window checkbox to open the linked page in a new window on the device.
- Select OK to save the button details then scroll to the bottom.
- Add any additional buttons.
-
Once the changes have been made, select Save Changes at the bottom.
-
Once all customizing has been completed, select Exit Edit Mode.
Adding Buttons to Existing Snippets
Use these steps to add new buttons to an existing snippet currently positioned on your Welcome page.
1. Copy the desired the HTML code below:
|
<a href="#" class="btn btn-default edit">WHITE BUTTON</a> |
|
|
<a href="#" class="btn btn-primary edit">BLUE BUTTON</a> |
|
|
<a href="#" class="btn btn-default edit">DOUBLE WHITE BUTTON 1</a> <a href="#" class="btn btn-default edit">DOUBLE WHITE BUTTON 2</a> |
|
|
<a href="#" class="btn btn-primary edit">DOUBLE BLUE BUTTON 1</a> <a href="#" class="btn btn-primary edit">DOUBLE BLUE BUTTON 2 </a |
2. Paste the code using these steps:
-
- Hover and select your desired snippet. The snippet will display a dashed border around it.
- Select the blue <> icon from the tools displayed on the side of the snippet. A window to enter HTML will be displayed.
- 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)
- Update the items shown in bold text in the code above to reflect a different title/words to be displayed on the button.
- Select OK to save.
- Your Button(s) will appear on the snippet.
- If you would like to move your Button, click your cursor at the front of the button and use the space bar or backspace key. You can adjust this way to eliminate gaps or spaces.
- A link icon will be displayed to add the URL that you want the button to go to.
3. Once the changes have been made, select Save Changes at the bottom.
4. Once all customizing has been completed, select Exit Edit Mode.
Creating Custom Button Colors
The default button color is white or blue. In order to create a button that is a custom color, you will need the Red Green Blue (RGB) numeric code for the color you would like the button to display (along with the HTML code for the button). Locate the RGB Codes using the Google Color Picker Extension or an Online Chart
In order to use this method, you must have an existing button in a snippet as outlined above. The bold X's below represent the RBG colors. Replace the section that starts with class and ends with target.
- HTML Button Code: class="btn btn-primary" target="original-title="" title="" _blank"="" style="background-color: rgb(XXX, XXX, XXX)"
Button 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 where the highlighted section 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);">TITLE TEXT HERE</a>
Generic Quick Links to Locations on a Public Site
When you are updating your Welcome Page or Public Side, you may want to use text and/or button links that go directly to a location within Eleyo (known as 'deep linking'). This can create an enhanced experience for your families whether it be account access, payment method management, or help with editing profiles. Below is a table of the URL paths that can be added to the end of the Public URL as a direct link. For example, if your district site is EXAMPLE.ce.eleyo.com, you would add the path to the end of that URL to create that direct link EXAMPLE.ce.eleyo.com/account/saved.
| Title/Action | Path | Purpose |
|
Create Account |
/account/register |
Directs to the Register a New Account screen. |
|
Sign In |
/account/login |
General sign in screen. Note: this may not be needed as Eleyo will ask them to sign in when necessary. |
|
Edit Relationships |
/account/relationships |
May be helpful for customers that want families to upload pictures or edit information about their child (grade, special needs, etc). |
|
Manage (Program Name) Account |
/child-care/program-name |
Allows for a direct link to the Child Care Program for enrolling, Account Management and Quick Pay. |
|
Account History |
/account/history |
Payments, invoices, across all programs that use Eleyo within the district. |
|
Saved Payment Method |
/account/saved |
Add or edit saved payment methods. |
|
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. |
|
Your FAQs |
/faq |
Directs your community to your FAQs. If you do not have FAQs setup, visit Creating Online FAQs. |
|
Link to send an email |
mailto: followed by the desired recipient email address | To create a link that will start an email to a specific email address. |
Additional Parent Help Resources
Beyond Eleyo URL quick links, you can also use URL links from our Parent Resource Learn Site Page. This has many helpful how-to's on various actions for customer account management, including instructions in several languages. For example, add a button or text to your Welcome Page in December titled How to Access Tax Statements and link to the Printing Child Care Tax Statements Online article from the Parent Resource guide to help reduce phone calls in January regarding tax statements. Any of the Parent Resource articles related to questions you are commonly asked would be good to add to your Welcome Page links to help reduce fielding calls and emails.
Additional Resources:
Working With Images and Marketing Tags