Skip to main content

​
Embedding

Embed Reading Steps reading experiences directly into your own websites and applications.
Embedding features require an Enterprise plan. Contact sales@readingsteps.uk for more information.

​
Overview

The Reading Steps embed allows you to:
  • Display the reading interface in your own application
  • Maintain your branding and user experience
  • Track reading progress through your systems
  • Provide seamless single sign-on

​
Quick start

Add the Reading Steps embed to your page: 
<iframe
  src="https://app.readingsteps.uk/embed/reader"
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen"
></iframe>

​
Authentication

​
Token-based authentication

Generate a session token for your student: 
// Server-side: Generate embed token
const response = await fetch('https://app.readingsteps.uk/api/embed/token', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${LINK_TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    student_id: 'stu_xyz789',
    expires_in: 3600 // 1 hour
  })
});

const { embed_token } = await response.json();
Use the token in your embed URL: 
<iframe
  src="https://app.readingsteps.uk/embed/reader?token=EMBED_TOKEN"
  width="100%"
  height="600"
></iframe>

​
Single sign-on (SSO)

For seamless authentication, configure SSO:
  1. Go to Admin Panel > Integrations > SSO
  2. Configure your identity provider
  3. Enable SSO for embeds
  4. Students are automatically authenticated

​
Embed options

​
Reader embed

Display the reading interface: 
<iframe
  src="https://app.readingsteps.uk/embed/reader?token=TOKEN"
></iframe>
Parameters:
ParameterDescription
tokenAuthentication token
book_idOpen specific book
levelFilter to reading level
themelight or dark

​
Library embed

Display the book library: 
<iframe
  src="https://app.readingsteps.uk/embed/library?token=TOKEN"
></iframe>
Parameters:
ParameterDescription
tokenAuthentication token
levelFilter to reading level
categoryFilter by category
hide_navHide navigation (true/false)

​
Progress embed

Display student progress: 
<iframe
  src="https://app.readingsteps.uk/embed/progress?token=TOKEN"
></iframe>

​
JavaScript SDK

For more control, use the JavaScript SDK: 
<script src="https://app.readingsteps.uk/embed/sdk.js"></script>

<div id="reading-steps-container"></div>

<script>
  ReadingSteps.init({
    container: '#reading-steps-container',
    token: 'EMBED_TOKEN',
    onReady: () => {
      console.log('Reading Steps loaded');
    },
    onBookComplete: (data) => {
      console.log('Book completed:', data);
    },
    onLevelChange: (data) => {
      console.log('Level changed:', data);
    }
  });
</script>

​
SDK methods

// Open a specific book
ReadingSteps.openBook('book_123');

// Get current student info
const student = ReadingSteps.getStudent();

// Get reading progress
const progress = ReadingSteps.getProgress();

// Close the reader
ReadingSteps.close();

​
SDK events

EventDescription
onReadyEmbed has loaded
onBookOpenStudent opened a book
onBookCompleteStudent finished a book
onLevelChangeReading level changed
onErrorAn error occurred

​
Styling

​
Responsive sizing

<div style="position: relative; padding-bottom: 75%; height: 0;">
  <iframe
    src="https://app.readingsteps.uk/embed/reader?token=TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
  ></iframe>
</div>

​
Custom themes

Pass theme parameters to match your branding: 
?theme=custom&primary_color=4F46E5&background=FFFFFF

​
Security

​
Allowed domains

Configure which domains can embed Reading Steps:
  1. Go to Admin Panel > Integrations > Embedding
  2. Add your domains to the allowlist
  3. Save changes

​
Content Security Policy

Add Reading Steps to your CSP: 
Content-Security-Policy: frame-src https://app.readingsteps.uk;

​
Troubleshooting

IssueSolution
Embed not loadingCheck domain is in allowlist
Authentication failedVerify token is valid and not expired
Styling issuesEnsure iframe has sufficient dimensions
Events not firingCheck SDK is loaded before init