Embed in a Vue component

You can embed HowdyGo demos into a Vue 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 Vue component in your repository where you want to embed the demo.
Paste in the demo embed code where you want the demo to sit.


<template>
  <div>
    <!-- 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 -->
  </div>
</template>
 
<script>
export default {
  name: 'DemoComponent'
}
</script>

Vue works well with inline styles, but for better maintainability, you can move the styles to a scoped style block or use Vue’s style binding syntax:


<template>
  <div>
    <!-- Start of copied snippet -->
    <div :style="containerStyle">
      <script src="https://js.howdygo.com/v1.1x/index.js"></script>
      <iframe
        src="https://app.howdygo.com/embed/<publicationid>"
        frameborder="0"
        scrolling="no"
        :style="iframeStyle"
      ></iframe>
    </div>
    <!-- End of copied snippet -->
  </div>
</template>
 
<script>
export default {
  name: 'DemoComponent',
  data() {
    return {
      containerStyle: {
        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',
      },
      iframeStyle: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      }
    }
  }
}
</script>

That’s it! Your demo is now ready to go.