Your Fluency Scoring Lead Magnet

Drop Pink Widget onto your landing page to delight your users and grow your mailing list.

How it works: visitors record a 45 second answer, see their estimated level, and trade an email for the full report.

Try Pink Widget

Why Pink Widget converts

Buyer intent

Answering a speaking prompt is a stronger buying signal than a PDF download.

Data-powered 🥕 carrot

People want their score. The fastest path to the answer is to give you an email.

Frictionless fun

Paste one script tag and choose your list provider. No heavy integration.

Clear analytics

Track opens, starts, completes, and email submits. Attribute to channel.

Overview Quick Start Integration Support

Add Pink Widget to your website

My Speaking Score provides embeddable widgets that can be integrated into any website or application. Our customizable widgets are designed to be lightweight, responsive, and easy to implement: perfect for low-stakes English Speaking assessment and feedback and a great front door to your English teaching services. 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 Pink Widget in just a few minutes:

1. Copy the Embed Code

Use the following HTML snippet to embed Pink 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://codebot.myspeakingscore.com/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://codebot.myspeakingscore.com/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 Pink 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

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