Now that you have created your visual syllabus design along with the AI prompts, here is how you can convert your design into a web link and embed it into your site such as WordPress.
How to Convert Your Design into a Web Link
Step 1: Prepare Your HTML File
Ask the AI to generate a single, standalone HTML file (or a full HTML, CSS, and JS package). While the package option is helpful if you want to make custom code tweaks, the single HTML file is the quickest, easiest route if you want to deploy without touching any code. Ensure your primary file is named index.html.
Step 2: Create a GitHub Repository
Sign in to your GitHub account, create a new repository, and upload your HTML file to it.
Step 3: Enable GitHub Pages Hosting
Go to Settings tab in your repository. Click Pages in the sidebar menu.
Under the Build and deployment section, set the source to Deploy from a branch. Select your main branch (e.g., main or master) and folder (usually /root), then click Save.
Step 4: Retrieve Your Web Link
Wait 1–2 minutes, refresh the page, and click the live link generated at the top of that menu.
How to Embed Your Design in Your Site
Step 1: Select Custom HTML
Select Custom HTML from your WordPress blocks.
Step 2: Embed Using iframe Code
Copy the following code, then replace YOUR WEB LINK with the web link to your design.
<iframe src="YOUR WEB LINK" width="100%" height="900" style="border:none;" loading="lazy">
</iframe>
Complete! Your visual syllabus design can now be embedded into any website that supports HTML code.
If you’d like to see the tutorial, check out this video.