Assessment Widgets

Integrate My Speaking Score English Speaking assessment widgets into your applications and websites in minutes.

Summarize with ChatGPT

Launch Scorebot

Overview Quick Start Integration Support

Overview

My Speaking Score provides embeddable widgets that can be integrated into any website or application. Our widgets are designed to be lightweight, responsive, and easy to implement: perfect for low-stakes English Speaking assessment and feedback. Widgets are powered by our API.

Easy Integration

Just copy and paste our embed code - no complex setup required.

Responsive Design

Our widgets automatically adapt to different screen sizes and devices.

Fast Loading

Optimized for performance with minimal impact on your site's load time.

Quick Start

Get started with My Speaking Score widgets in just a few minutes:

1. Copy the Embed Code

Use the following HTML snippet to embed our dynamic widget:

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Newsletter Widget</title>

    <!-- Load the widget styles -->
    <link rel="stylesheet" href="https://dynamic-widget.netlify.app/dynamic-widget-vue.css">
  </head>
  <body>
    <!-- Widget will be mounted here -->
    <div id="my-widget"></div>

    <!-- Load the widget script -->
    <script>
      (function () {
        var s = document.createElement("script");
        s.src = "https://dynamic-widget.netlify.app/widget.js";
        s.async = true;
        s.onload = function () {
          // Initialize the widget with optional config
          window.initWidget({});
        };
        document.head.appendChild(s);
      })();
    </script>
  </body>
</html>

Note: Make sure to include both the CSS and JavaScript files for the widget to work properly.

Integration Guide

Basic Integration

The simplest way to integrate our widget is to include it in your HTML:

Copy to Clipboard

<!-- Add to your HTML head -->
<link rel="stylesheet" href="https://codebot.myspeakingscore.com/dynamic-widget-vue.css">

<!-- Add to your HTML body -->
<div id="my-widget"></div>

<!-- Add before closing body tag -->
<script>
  (function () {
    var s = document.createElement("script");
    s.src = "https://codebot.myspeakingscore.com/widget.js";
    s.async = true;
    s.onload = function () {
      window.initWidget({});
    };
    document.head.appendChild(s);
  })();
</script>

Framework Integration

React Integration

Copy to Clipboard

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Load CSS
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://codebot.myspeakingscore.com/dynamic-widget-vue.css';
    document.head.appendChild(link);

    // Load JS
    const script = document.createElement('script');
    script.src = 'https://codebot.myspeakingscore.com/widget.js';
    script.async = true;
    script.onload = () => {
      window.initWidget({});
    };
    document.head.appendChild(script);

    return () => {
      // Cleanup
      document.head.removeChild(link);
      document.head.removeChild(script);
    };
  }, []);

  return <div id="my-widget"></div>;
}

Vue.js Integration

Copy to Clipboard

<template>
  <div id="my-widget"></div>
</template>

<script>
export default {
  mounted() {
    // Load CSS
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://codebot.myspeakingscore.com/dynamic-widget-vue.css';
    document.head.appendChild(link);

    // Load JS
    const script = document.createElement('script');
    script.src = 'https://codebot.myspeakingscore.com/widget.js';
    script.async = true;
    script.onload = () => {
      window.initWidget({});
    };
    document.head.appendChild(script);
  }
}
</script>

Support & Resources

Get help from our awesome support team at widgets@myspeakingscore.com.