Brightspot allows content creators to modify the actual page with raw HTML, CSS, and Javascript if specific and custom changes need to occur to the site. This will not be a tutorial on HTML/CSS/JS but rather how to set up the module to start making specific, custom changes to your content.
Setting Up Custom Code
To get the module to add custom code to your page do the following:
- Click on add under the content.
- Scroll to the bottom of the options and click on the misc tab.
- In this tab, there is an option for a Raw HTML Module. Click on it.
Once the module is loaded, the main screen will pull up. Here you can give it a name if you'd like. If you do choose a name or description, keep in mind it will show up on your page.
At the top of the module, there are three tabs. Each of these tabs will be associated with a different type of code that can be used for your site. In the CSS/JS tab you can set the internal name, which will be the name you link to inside your HTML tab. The CSS/JS tab can also link to other external scripts outside of Brightspot if that is something necessary for your page (see photo on right).
Your script will show on the preview page as your code, so you can view the changes to the page "live" without having to publish to see the finished results.
For specific steps on how to configure a Raw HTML Module, consult the video training below.
How to Add Custom Scripts and Styles
Tips
Coding
Inside the HTML tab, instead of using all three tabs to write out your code, can also use <style> or <script> tags here as well to keep everything inside one file. This is especially useful if the page only needs minor, small lines of code added to it.
Finding Brightspots IDs
If there is a specific module or content type that you need to be modified for your page, you can use the Inspect Element feature that most browsers provide.
On Chrome and Edge, right-click anywhere on the page and choose Inspect Element.
If you are running Firefox, click on three lines in the top right of your browser, select Web Developer, and then Inspector.
This will allow you to see what IDs Brightspot has given the modules and content within them and you can modify them as needed.
Q&A
-
Toggle ItemCan I add a chat widget to my site?
Brightspot does not include a chat module by default, but custom code modules can be created to add this functionality to a website. The code for these modules is provided by third-party services and is not directly supported by BYU. Pricing, integration, and accessibility questions should be directed to the party providing the code.
-
Toggle ItemHow do I edit the breaks within my text on Brightspot?
Brightspot relies on templates to input content, which sometimes results in line breaks and unsolicited spaces. One technique to avoid this is to add a break and 2 enters between the heading and body of text to minimize spaces. If necessary, these can also be removed using CSS. If you have a specific concern and are unable to resolve the issue, please contact websites@byu.edu for additional assistance.