This tutorial shows how to embed a Replit web app directly into your WordPress site using an iframe, so you can add interactive tools and custom features to your blog or business site without leaving WordPress.
Notes:
- You need an existing Replit project with a working web app ready to embed. If you don't have one, create a new Replit project first and build a simple web app - for example, a calculator, form, or interactive tool.
- The code you'll copy from Replit should be responsive HTML. You can ask Replit's Agent to generate this for you by typing: Add to WordPress website.
- Your WordPress site needs to allow custom HTML blocks. Most modern WordPress sites (including those on WordPress.com and self-hosted versions) support this by default. Some heavily restricted plans may not.
- The Replit app domain will be embedded in an iframe. WordPress will display it within your page, and visitors will see the fully functional app.
- Sign in at replit.com and open the Replit project you want to embed into WordPress.
- In the Agent prompt field, type: Add to WordPress website. The Agent will generate an iframe embed code and display it in the output.
- Copy the iframe code that appears. Right-click and select Copy, or use Ctrl+C (or Cmd+C on Mac) to copy the entire code block.
- In WordPress, go to the post or page where you want to add the app. Click the + button to add a block and search for Custom HTML. Add a Custom HTML block.
- Paste the iframe code into the Custom HTML block. If the code includes a placeholder domain or your Replit project URL, verify it's correct.
- View the page. Your Replit app will now display and be fully functional on your WordPress site. Test the interactive features to confirm everything is working. Save or Publish the page.
