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.
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:
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:
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:
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:
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:
Preview and Publish: Preview your project to ensure the iframe is working, then publish.
Custom Webpage
Open Your HTML File: Open the HTML file where you want to add the iframe.
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.
© 2024 ChatLabs