Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Telehealth
Marketplaces
Recruiting
Document management
Real estate
Communications software
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Newsroom
Partners
Build vs. buy
Customer stories
Trust & security
Why NylasHow to Receive Data From an iframe
In this blog post we explore how to receive data from an iframe.
In this blog post we are going to explore how to receive data from an iframe. We are seeing technical trends begin to push Web Based Development towards Progressive Web Applications and Single Page Applications. Responsive applications are becoming an expectation for many end users in the age of mobile devices.
Keeping a user on your application while gathering data from various sources can be a challenge with the growing amount of SaaS integrations. Integrating these tools while creating a seamless white labeled experience can be challenging.
In this blog we go over how to receive data from an iframe to the parent page.
If you’ve built an app using a SaaS or CSaaS tool, then you’ve dealt with Redirect URI’s to send your user back to your application after they leaving the third-party page. But what if your user never had to leave your application to utilize these tools.
Let’s explore this question further in the coming sections!
Let’s use the Nylas Scheduler to show how we can iframe an integration to send a message from the iframe to the parent page. The iframe will communicate back that the user booked a meeting while persisting all data from the scheduled meeting. To learn more about the Nylas Scheduler, check out our blog post on How to Create a Scheduler Calendar.
To start, we initiate our application and embed the Nylas Scheduler in an iframe on the page. For this example, I will be using a React Application. These principles for receiving data with iframe are possible with any front-end technology including vanilla JavaScript.
First, we will create the template application:
import './App.css';
function App() {
return (
<Router>
<div className="App">
<h2 className='App-header'>IFrame Scheduler Demo</h2>
</div>
</Router>
);
}
export default App;
This is a boiler plate template from create-react-app with some of the unneeded code and imports removed.
Now, we create an iframe component to use on our desired route:
export default function Iframe({iframesrc}) {
return <iframe src={iframesrc} title="Iframe Scheduler" width="100%" height="1000"></iframe>;
}
We are passing through a prop here as the Nylas Scheduler supports multiple scheduling pages, and you may want to pass different pages based on who the end user is booking an appointment with.
Now for our demo, we will import this into our main application and set up routing to make this iframe the default route using BrowserRouter from react-router-dom:
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Iframe from './components/iframe';
function App() {
const iframesrc = process.env.REACT_APP_IFRAME_URL
return (
<Router>
<div className="App">
<h2 className='App-header'>IFrame Scheduler Demo</h2>
<Routes>
<Route exact path="/" element={<Iframe iframesrc={iframesrc}/>}/>
</Routes>
</div>
</Router>
);
}
export default App;
In our example, we are retrieving the iframe URL from our environment variables, however in a production environment we would retrieve this from our backend based on who the user is trying to book with.
Next let’s create a redirect page. This page will be where our Nylas Scheduler redirects to after a booking is complete and will be in charge of capturing the booking data and informing the parent page about the booking.
import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
export default function Redirect() {
const [searchParams] = useSearchParams();
useEffect(() => {
/*
Structure of my use cases data:
{
"start_time": 123123123,
"end_time": 123123124,
"name": "Chase"
}
*/
const data = Object.fromEntries([...searchParams])
if(data){
window.parent.postMessage(data, 'http://localhost:3000/meetingdetails');
}
}, [searchParams]);
return <p>You made it to the redirect</p>;
}
Now we’ve got a component that will capture the redirect from the Nylas Scheduler and then post a message from the iframe to the parent page persisting the data received as well! As an extra layer of security for our application, we are passing through the originating URL in the postMessage call.
Lets add a route for this redirect component and an event listener to our application to capture this message and data being posted to the parent page! We will do this in the main file for our app using the useEffect and useState hooks in React.
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Redirect from './components/redirect';
import Iframe from './components/iframe';
import { useEffect, useState } from 'react';
function App() {
const iframesrc = process.env.REACT_APP_IFRAME_URL
const [data, setData] = useState({})
function listener (e) {
// Get the sent data
const iframeData = e.data;
if (iframeData.account_id){
setData(iframeData)
sessionStorage.setItem("renderData", JSON.stringify(iframeData))
}
}
useEffect(() => {
window.addEventListener('message', listener);
return () => window.removeEventListener('message', listener)
}, [setData])
return (
<Router>
<div className="App">
<h2 className='App-header'>IFrame Scheduler Demo</h2>
<Routes>
<Route exact path="/" element={<Iframe iframesrc={iframesrc}/>}/>
<Route exact path="/redirect" element={<Redirect/>}/>
</Routes>
</div>
</Router>
);
}
export default App;
Now that we have a listener in place, we are capturing the event sent from the iframe to the parent page as well as the data included in that message!
Finally, let’s render this data so we can see what is being passed back in the message from the iframe to the parent:
import '../App.css'
export default function Meeting(props) {
const renderData = JSON.parse(sessionStorage.getItem('renderData'))
if(renderData.account_id) {
console.log('Data has account ID')
return Object.entries(renderData).map(([key, value], i) => {
return (
<div className='Scheduler-data'>
<b>{key}: </b>
<p>{value}</p>
</div>
)
})
} else {
return(
<div>
<p>No Meeting Details</p>
</div>
)
}
}
In this component, we are creating a simple method for iterating over the data which is stored in the session storage.
Finally, we need to set up a method to render this component to display the data received:
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Redirect from './components/redirect';
import Iframe from './components/iframe';
import Meeting from './components/postbooking';
import { useEffect, useState } from 'react';
function App() {
const iframesrc = process.env.REACT_APP_IFRAME_URL
const [data, setData] = useState({})
function listener (e) {
// Get the sent data
const iframeData = e.data;
if (iframeData.account_id){
setData(iframeData)
sessionStorage.setItem("renderData", JSON.stringify(iframeData))
}
}
useEffect(() => {
window.addEventListener('message', listener);
return () => window.removeEventListener('message', listener)
}, [setData])
useEffect(() => {
if(data.account_id) {
window.location.assign('http://localhost:3000/meetingdetails')
}
}, [data])
return (
<Router>
<div className="App">
<h2 className='App-header'>IFrame Scheduler Demo</h2>
<Routes>
<Route exact path="/" element={<Iframe iframesrc={iframesrc}/>}/>
<Route exact path="/redirect" element={<Redirect/>}/>
<Route path="/meetingdetails" element={<Meeting/>}/>
</Routes>
</div>
</Router>
);
}
export default App;
We just created an application allowing us to redirect the user and receive data with iframe informing our application!
Being able to receive data from an iframe to the parent page lets you create white labeled functionality with tools like the Nylas scheduler used in this demo. With all the tools we integrate into our applications, creating a consistent method to receive data with iframe is a powerful utility.
Continue building with Nylas and learn more by visiting the documentation. Sign up here if you need to create a Nylas account for free!
Please enter your email address and receive the latest updates.
