@wiv01 added pageContent (English):
Use the Waivio HTML Object together with the code generated by ChatGPT to design unique pages or create a complete landing page.
The process includes two main steps: creating a website in ChatGPT, adding it to Waivio and tips for best result.
This example uses ChatGPT as an AI instrument that can generate code based on text prompts. You can use any source of code you prefer.
Create a Website in ChatGPT
1. Go to ChatGPT and log in.
2. Write a prompt asking it to create a website and send it. The requirements for the site are to use only HTML, CSS and JS(scripts). Include as many details and preferences as you want.
For example:
Create a site for ... .
Create a landing page for ... It should include ... Use HTML, CSS and JS.
3. You should see the generated code along with terminal-style buttons that allow you to copy, edit, download, or preview your code. If you don’t see them, try sending another prompt explicitly saying Create a site.
4. Click “Preview” to see your site.
5. The full-screen preview mode will appear. You can see your chat on the left side and the site preview on the right side of the screen.
6. A nice addition to your site is a main menu for navigation, especially if this page will be one of your social sites. To add a main menu, you need to prepare links. Go to Waivio and search for the needed objects. Once you have your objects, tell ChatGPT that you want a main menu that links to these URLs.
Add a main navigation menu:
Shop: https://coffeeshop.gifts/object/7ujfq-shop
Books: https://coffeeshop.gifts/object/41sbwx-books
Camp life: https://coffeeshop.gifts/object/vpe-camp-life/newsfeed
Legal: https://coffeeshop.gifts/object/ljc-legal
In the same way, you can fix or improve the site that ChatGPT gives you by adding new sections, buttons, images, and other details. You can experiment and explore. In the header, you can close the preview by clicking the cross button or “Stop.” You can share, copy the code, or return to a previous version.
When you are satisfied with the result, copy the code.
Now you have the source code that you can use.
Add Code to Waivio
1. Go to Waivio.
2. Log in.
3. Click the pencil button in the header.
4. Click Create new object.
5. Fill the object name (your site/landing).
6. Choose the type: html.
7. Click Create.
8. Click on the created object card name to open your object.
9. Click Edit.
10. Copy and paste your source code from ChatGPT to Write your code area.
11. Click Ready to publish, button in the end.
Preview your site. Note that it is view based on the windows size in the full screen on social sites it will look better when all screen size will be used. But here rough preview of your site.
You can hide the main sections of the site, such as the header with the search and Sign In buttons, as well as the main menu of the site using checkboxes in Preview their located after the code: Hide sign-in section, Hide site main menu section. You can go back to Edit clicking on cross button in the top.
12. Click Submit.
Now your site page is running on Waivio.
To view it in full, mark it with a heart, then go to your social site, find the object, or make a direct link. You can also change the site domain in your browser’s address bar to your site name, or visit any of the following social sites for examples:
Tips for Best Results
Be specific in your request. Describe the site’s purpose, audience, layout, colors, fonts, and needed features (e.g., sticky header, animations, galleries).
Use your own image URLs. Provide direct image links and specify their placement. Generated links may not work reliably.
Include JavaScript if needed. Just mention it if you want interactive menus, sliders, modals, form validation, or animations.
Iterate on the design. Ask for changes like improved mobile responsiveness, spacing, alignment, or color and layout updates.
Handle generation errors. Click the error for a fix or revert to a previous version and clarify your instructions.
