How to add footer to Canvas

I have been asked to see if it is possible to added some institution related links as a footer to Canvas pages. Is this possible? If it is possible I'm hoping someone who has done this would be able to provide some code examples and guidance of exactly how to accomplish this task. Thank you!

Find more posts tagged with

Accepted answers

unknown

HI jmorgan,

I thought I would check in, have any of the solutions that have been proposed resolved your issues?

If not, please let us know and we can take another look.

Cheers,

Stuart

All comments

themidiman

We have a custom support number that we like to add to the bottom of every page in Canvas. Basically it's using jQuery to prepend the other items in our JS override file in the UI Theme editor. Here's the code:

<SPAN class="keyword token">var</SPAN> call_support_msg <SPAN class="operator token">=</SPAN> <SPAN class="string token">"24x7 Toll Free Support Line: 1-888-888-8888"</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#footer"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">prepend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<div style='font-color:#fff;margin-right:20px'>"</SPAN> <SPAN class="operator token">+</SPAN> call_support_msg <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</div>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The number in the code is a fake for demonstrative purposes, but hopefully that gives you some food for thought. Here's what the result looks like:

screenshot of footer

Chris_Hofer

Hi jmorgan...

Similar to what JEFHQ12951 has posted, we have this in our global JS file (not the real telephone number):

<SPAN class="comment token">//Display the Canvas Help Desk technical support phone number to the footer (just to the right of the Facebook and Twitter links).</SPAN><BR /><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#footer-links'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<span> | Canvas Help Desk - 888.888.8888</span>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here is what it looks like at the bottom right corner of the Dashboard screen. It doesn't show up within courses, however.

Custom JS Footer