@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
1. Provide detailed instructions to ChatGPT. The more specific your request, the more accurate and customized the final result will be. Clearly describe:
The purpose and audience of the site.
Required structure (section order, layout, number of columns, navigation style).
Styling details (colors, fonts, spacing, shapes, themes).
Functional requirements, including whether JavaScript is needed.
Recommended examples to include in your prompt:
Page structure: header with logo and navigation, hero section, product or feature blocks, testimonials, contact form, footer
Fonts: specify web-safe fonts or request embedded font styles.
Color palette: include HEX or RGB values.
Behavior and interactions: animations, sticky header, gallery switching, etc.
2. Use your own image URLs. Generated image links may not always work. To ensure proper display:
Provide direct URLs to your preferred images.
Specify where each image should be used in the design.
This ensures consistent results when publishing site on Waivio.
Note: ChatGPT does not generate unique images in this workflow. Instead, it references existing images from online sources or stock libraries, which may not always be valid or accessible.
3. Integrating JavaScript (optional but supported). If you want advanced functionality, simply state that JavaScript should be included. Examples of enhancements:
Interactive menus.
Image sliders or carousels.
Modal windows.
Form validation.
Smooth scrolling and animations.
4. Improve the design through iteration. After generating the first version, continue refining by requesting focused updates:
Improve responsiveness for mobile screens.
Adjust font sizes and spacing for readability.
Align images and text more consistently.
Add or remove visual elements for balance.
Update colors, background images, or section layouts.
5. Manage errors during generation. If ChatGPT returns an error in one of the responses, you can:
Click the error message to request a correction or explanation.
Revert to the previous working version of the code and restate your request, possibly with more specific or simplified instructions.
!!!!123