Embed in Docusaurus

You can embed HowdyGo demos into Docusaurus 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.