iframe integration for Speechace speaking test

Overview

Speechace's speaking test can be integrated in to existing websites, blogs or web-pages using simple iframe integration which requires no coding. This is very similar to how Youtube allows embedding video content in to other websites. However note that this is an insecure option and should only be used for piloting the speaking test with your audience. Once you expose the iframe, malicious users can copy the iframe and reuse it in their own websites, however any test usage will be accrued to your billing account. Therefore please be very careful as you use this option for piloting the speaking test.

iframe integration steps

a. First of all create an assessment in your workspace by either cloning or creating a custom assessment. Let's say, I created a new Call center LV-426 test as shown below.

b. Now click on the Share Assessment icon

c. Now, you should see the Share Assessment panel pop up as below. Once the popup is available, please click on the oEmbed tab:

d. Now click on the Get iframe HTML button and copy the iframe code:

e. Now you can create an HTML file and put the iframe code in the HTML as shown in the below sample:

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body style="margin: 0; overflow: hidden">
    <iframe width='100%' height='100%' allow='camera;microphone' src='https://speak.speechace.co/embed/ui/108?speechace_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjb25zdW1lcktleSI6IklsWXExendwTXJDYVVBVzMiLCJ1c2VySUQiOiJhdXRvIiwiZXhwIjoxNjgzOTM4NzcxLCJpc3MiOiJzcGVlY2hhY2UiLCJjb3Vyc2VJZCI6MTA4LCJxdWl6SWQiOm51bGx9.imYdt7ShS-lKXCY0okAtfewKRX0zp7B2-f4S5HOMvrA'>
   </iframe>
  </body>
</html>

f. Now if you launch the HTML, you should see the test launch in an iframe as below:

g. Note that in this case, the user identity is not known so you will not be able to see any identifiable user details in the management pane. Instead once the test is complete, you should see an obscure user id in the management pane results as below:

Last updated