If you want participants to access your test from your organization’s website, you can easily add a link to the test from your website. You can also embed the test into one of your website’s pages, so participants can take the online test directly on your website.
In this article:
Linking to a test from your website
A link to your SHOEBOX Online test can be easily added to your organization’s website. To do this, you may need the help of your organization’s webmaster; by providing them the link to your online test, they can embed the link in a button or heading on your website.
To add a test link to your website
For users who manage their own web services and may not have access to a professional webmaster, this section highlights the procedure for adding your online test to your website’s homepage. This workflow will apply to most site builders such as WordPress or Squarespace.
Step 1: Build a button
The first thing you will need to do is design how your button will appear by using your site’s Cascading Style Sheet (CSS). If your website already has button styles defined in the CSS, you may want to use one of the existing styles. If you want to use a new style, you will need to create a new class attribute for the button and define how the button will look. The example below is the one used in our “Example Company” demo image.
|
font-size: 13px; text-decoration: none; padding: 12px 25px; background: #7469b9; border-radius: 60px; border-bottom: none; color: white; display: inline-block; transition: .3s background ease-out; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.26); |
|---|
Step 2: Place button, add button text and link to button
Once your button has been designed, you’ll then need to add the button to your homepage in whichever location you think is the most suitable. In the example below, the button is coded to be placed in the center of the homepage’s hero image, with the text “Test Your Hearing!” to appear in the button. Finally, ensure the link to your test is embedded in the button by including an <a> tag with the URL to your test.
Step 3: Preview and confirm
Once you have built your button and added it to your website’s HTML, you should preview the output to ensure that it looks the way you want it to. Below is an example of our “Example Company” demo homepage with the aforementioned CSS and HTML applied.