Vibe code into Google sites help?

Randi
New Contributor II

Hi, 

Ive been using vibe coding in canvas to create custom apps for my elementary students. I’ve had Gemini produce the raw code for me to copy and paste into codeAI app lab. Does anyone know how to do this in Google Sites? I’m not sure we will have access to codeAI next year and my students can’t open anything that contains Gemini in the web address. Thanks! 

5 REPLIES 5

nicholek
New Contributor

Hey there Randi, 

We do this frequently in our district using Google Sites! You'll want to make sure when you create the game in Gemini that you include in your prompt at the end of it this line so that it's formatted properly for a Google Site: Create a single-file HTML, CSS, and JavaScript code block for Google Sites. From here, once your code is generated, you'll copy it and head over to your Google Site, and here's what I like to do to make it a nice full page embed that looks good for the students to use the activity/game/etc.:

Click on the "Pages" tab and hover over the "Plus" icon in the bottom right corner. Then, select the "Full page embed" option. It'll prompt you to name your page, then click done.  From here, select the "Add embed" option and this is where you'll select the "Embed code" option and paste your code from the Gemini Canvas creation into this box, and click next, and then click insert on the next screen. 

This will give your students a fully interactive version of the game/activity/experience you designed using Gemini Canvas on the Google Site. Just don't forget your publishing options to ensure they can access the Google Site. 

Randi
New Contributor II

Thank you so much! I will give this a shot! 

HeatherS
New Contributor II

We useCatapult CMS for our websites district wie.  I created a Google Site to house this and then linked that site to the webpage. https://ehms.egusd.net/Programs/Athletics/Middle-School-GPA-Calculation/index.html

   

HeatherS_0-1782942024540.png

Heather Shannon
Computer Technology Teacher
Edward Harris Jr. Middle School
Elk Grove Unified School District
 

Randi
New Contributor II

Thank you! This is good info to have! 

Breccia
New Contributor

Cattura.PNGTry doing it this way: go to your site's page, select 'Embed', and then choose 'Embed code'.