Creating a Custom Button Inside of the Virtual Portal
The virtual portal follows a different path when adding new directory links compared to the Event Website. In order to create custom buttons in the virtual portal, it is necessary to utilize a bit of custom CSS.
Before writing any code it is important to note that variables like, icons, URLs and so forth are unique to each event. This means that event organizers will have to type these portions manually.
Please note that it’s important for you to review how to use CSS. The responsibility for custom styles and scripts are things our team cannot assist with or provide support for. We recommend you have someone with web development experience to assist you with this.
Any effects custom styles and scripts may have are fully reversible by simply deleting the content, so there is no inherent risk in applying them and experimenting. We may provide templates or examples for you to use as well, which are provided as-is and are meant to be examples for you to use and modify.
We recommend reviewing our Customizing the Event Website with CSS Styles and JavaScript article for more information.
- From the Event Dashboard, navigate to Experiences > Virtual > Settings
- Scroll down to Custom Code and copy and paste the following code:
<script>
<br>$("button[data-page='settings']").before('<a class="virtual-action d-block" href="URL HERE" target="_blank"><span class="icon-container"><i class="ICON CODE HERE"></i></span><span class="ml-2">CUSTOM TEXT HERE</span></a>')
<br>$("#sidebar").css("padding-bottom","100px");
<br></script>
Please note that everything capitalized needs to be customized to fit with your event.
- The URL is the link to where the button leads to.
- Custom Text is the name that appears for the button.
- The Icon Code is the icon that appears next to your Custom Text. A list can be obtained by navigating to https://fontawesome.com/v4/icons/. Type the icon you are looking for and copy and paste code next to i class. For example if you want a book icon, look up the relevant page (https://fontawesome.com/v4/icon/book) and type: fa fa-book.
Once done, select Save Changes to have the button appear in your virtual event portal.