How to embed an app into my website

Step 1. Share and copy the app URL

In the app preview screen, click Share, then in the popup enter the App name, and click Share button. Then copy the created link.


Step 2. Create an iframe

Create an iframe html code. Create IFRAME html tag and replace the https://labs.writingmate.ai/share/XXX with the link from Step 1.

<iframe src="https://labs.writingmate.ai/share/XXX" width="800" height="600" frameborder=0></iframe>

Step 3: Embed the iframe into your website

Wordpress

1. Switch to the HTML Editor: When editing a post or page in WordPress, switch from the Visual editor to the HTML (or Text) editor. This allows you to insert raw HTML code.

2. Insert the Iframe Code: Add your iframe code where you want it to appear in the content. Here's an example of how an iframe code might look:

<iframe src="https://labs.writingmate.ai/share/XXX" width="600" height="400" frameborder=0></iframe>

3. Adjust the Attributes: You can adjust the `width`, `height`, and other attributes to fit your needs.

4. Save and Preview: Save your changes and preview the post or page to ensure the iframe is displayed correctly.

If you're using the Gutenberg editor, you can add an HTML block and then insert your iframe code there. Here's how:

1. Add a Custom HTML Block: Click on the "+" button to add a new block, then search for "Custom HTML" and select it.

2. Insert the Iframe Code: Paste your iframe code into the Custom HTML block.

3. Preview and Publish: Use the preview option to ensure everything looks good, then publish or update your page.

Remember to replace https://labs.writingmate.ai/share/XXX with the actual URL from Step 1.

Webflow

Add an Embed Element: In the Webflow Designer, drag an "Embed" element from the Add panel onto your page.

Insert the Iframe Code: In the Embed Code Editor, paste your iframe code:

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Save and Publish: Click "Save & Close" and then publish your site to see the changes.

Wix

Add an HTML Embed: In the Wix Editor, click on "Add" (+), then "Embed Code," and select "Embed HTML."

Insert the Iframe Code: Paste your iframe code into the HTML settings window:

<iframe src="https://labs.writingmate.ai/share/XXX" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Apply and Preview: Click "Apply" and then preview your site to ensure it displays correctly.

Squarespace

Add a Code Block: Edit the page where you want the iframe, click on an insert point, and choose "Code" from the block menu.

Insert the Iframe Code: Paste your iframe code into the Code Block:

<iframe src="https://labs.writingmate.ai/share/XXX" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Save and View: Save your changes and view the page to see the iframe.

Framer

Add a Code Component: In Framer, add a "Code" component to your canvas.

Insert the Iframe Code: Open the code editor for the component and paste your iframe code:

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Preview and Publish: Preview your project to ensure the iframe is working, then publish.

Custom Webpage

  1. Open Your HTML File: Open the HTML file where you want to add the iframe.

  2. Insert the Iframe Code: Add the iframe code in the desired location within the <body> Save and Open: Save your HTML file and open it in a web browser to view the iframe.

In each case, replace "https://labs.writingmate.ai/share/XXX" with the actual URL you want to embed. Adjust the width and height attributes as needed to fit your design.


Sign up just in one minute.