Advanced Usage

Render a React app on an event such as pre_load.

Let take a look at an example that will render a React app on an event such as pre_load.

First, you need to create your app and make your mounting function named mountMyReactApp() that is accessible from the HTML file. This example simply defines a globally accessible function.

your-react-app.js
//You react app
const App = () => {
return <div>
<h2>Pre_load React App</h2>
</div>
}
//Define a globally accessible mounting function
var mountMyReactApp = () => {
console.log('mountMyReactApp called')
//Renders your react app
ReactDOM.render(<App />, document.getElementById('your-app-root'))
}

Depending on how you structure your app/website, you can call your mount react app function in other ways, this is just one simple example of how it could be done.

Then in your embed code for Servicebot, you would add the handleResponse setting like below, which will call the mounting function mountMyReactApp()defined above if the pre_load event is fired.

your-subscription-portal.html
<div id="your-app-root"></div>
<div id="servicebot-subscription-portal"></div>
<script>
window.servicebotSettings = {
...
handleResponse: async function(payload){
if(payload.event == 'pre_load') {
mountMyReactApp()
}
},
...
};
...
...