Embed in Docusaurus
You can embed HowdyGo demos into Docusaurus (opens in a new tab) documentation pages easily 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 markdown file in your Docusaurus repository and go to the line where you want to embed the demo
- Insert an open and close brackets like so:
<>
</>- Paste the demo embed code between the brackets
<>
<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>
</>- Docusaurus is React based and 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:
<>
<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>
</>- That's it! Your demo is now embedded.