Note: You’ll need to create custom quiz result pages for this setup to work. Before following these steps, make sure you redirect your quiz result pages to a URL. If you're using the quiz result pages from Interact, follow these steps instead.
1. From your Showit account open the Design app.
2. Open the website you want to embed your quiz on.
3. Create a custom quiz cover on the desired location of your website. This can either be on your website homepage or on a Quiz specific website page.
4. Then, open up that section of your website. For example, the above quiz cover image is created in the Header section.
5. Click the 3 dots to the left of the Header section, then choose Add Canvas View. Canvas View 1 will appear within the Header section.
6. Drag and drop all of the elements from the page section into Canvas View 1.
7. Click on the element that will trigger your quiz to open. In this example, that is when someone clicks on the button: Take The Quiz. In the right menu, select the Click Actions tab.
8. Update the settings in Click Actions to:
Type: Canvas
Canvas: This Canvas
Canvas View: Next
Uncheck the Scroll to Canvas box
9. Now repeat step 5 to add a second canvas view. Click the 3 dots to the left of the Header section, then choose Add Canvas View.
10. Click on View 2, then click the + element icon and choose Embed Code. The embed code frame will appear on the canvas view.
11. An embed frame appears on the canvas view; resize as desired as this is where your quiz will appear.
12. Now open your Interact account and click Share & Embed on the quiz you want to appear on your Showit site.
13. Choose the Embed Code tab, then choose Javascript. In Embed Options, toggle on the following options then click Copy Code.
Auto resize embed to fit quiz content
Disable cover page on quiz
Redirect host page on redirect
14. Navigate back to your Showit account and in the Properties panel (on the right) select the Embed Info section, then click Custom Code.
15. Paste the code from Interact into the Custom Code section, then click Save.
16. Click publish.
View your website to ensure the quiz appears as desired.
