Embed in a React component
You can embed HowdyGo demos into a React component by using our embed code and making some small adjustments.
- Publish your demo in HowdyGo and copy the embed code as per this guide.
- Open the React component in your repository where you want to embed the demo.
- Paste in the demo embed code where you want the demo to sit.
export const DemoComponent = () => {
return (
// Start of copied snippet
<div
style="
box-sizing: content-box;
position: relative;
max-width: 2560px;
aspect-ratio: 2560 / 1308;
padding-bottom: 40px;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0px 0px 1px rgba(45, 55, 72, 0.05),
0px 4px 8px rgba(45, 55, 72, 0.1);
overflow: hidden;
"
>
<script src="https://js.howdygo.com/v1.1x/index.js"></script>
<iframe
src="https://app.howdygo.com/embed/<publicationid>"
frameborder="0"
scrolling="no"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
></iframe>
</div>
// End of copied snippet
);
};- React doesn't like traditional inline HTML styling, so we will need to convert the style string on the parent div and iframe into a javascript object like so:
export const DemoComponent = () => {
return (
// Start of copied snippet
<div
style={{
boxSizing: 'content-box',
position: 'relative',
maxWidth: '2560px',
aspectRatio: '2560 / 1308',
paddingBottom: '40px',
border: '1px solid #e2e8f0',
borderRadius: '12px',
boxShadow:
'0px 0px 1px rgba(45, 55, 72, 0.05), 0px 4px 8px rgba(45, 55, 72, 0.1)',
overflow: 'hidden',
}}
>
<script src="https://js.howdygo.com/v1.1x/index.js"></script>
<iframe
src="https://app.howdygo.com/embed/<publicationid>"
frameborder="0"
scrolling="no"
style={{
position: absolute,
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
></iframe>
</div>
// End of copied snippet
);
};- That's it! Your demo is now ready to go.