> For the complete documentation index, see [llms.txt](https://dapp-ai-1.gitbook.io/dapp-ai-product-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dapp-ai-1.gitbook.io/dapp-ai-product-docs/user-manual/website-maker.md).

# Website Maker

A user manual for the Web generator Telegram BOT

### Introduction

In this section, you'll find step-by-step instructions on how to customize your website. Learn to effortlessly tweak colors, text, and other essential components using the intuitive Telegram bot interface. This straightforward guide will walk you through the process, ensuring that even beginners can easily navigate and tailor their websites with precision using the DAppAI Website Builder.

### Getting started

1. Start the bot sing the /start command and 2 options will pop up, to create a new website or edit a already being worked on site. For the purpose of the manual we will assume this is the first time working with the builder so we will move forward with new website.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FqL9nmXDOkLQ1fJuCg5jO%2F1.png?alt=media&amp;token=4bcb3911-8202-4671-834a-124ab34da61d" alt=""><figcaption></figcaption></figure>

2. Select from your template options based upon the kind of website that you are building, Meme or Utility or view all the templates that are available for inspiration.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2Fbym7Ik3qWP44iOLbI2hQ%2F2.png?alt=media&amp;token=028ed3a1-ad08-4d75-b669-db4ec9a7737f" alt=""><figcaption></figcaption></figure>

3. Once selected you can browse through the available templates with the Next and Previous buttons. The preview button will take you to an exteran site where the layout of the full website template can be found to see the whole site in a browser.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FgDQWlzL0uClF924ymSFA%2F3.png?alt=media&amp;token=e63099aa-ccf1-4913-bf4a-7e0507ae081e" alt=""><figcaption></figcaption></figure>

4. Once the template has been chosen you can move on to editing the site with full customization options for the links, headers, text and images + icons.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FVBmgUetA5mHrBu6cfX1D%2F4.png?alt=media&amp;token=36e4d0bb-7346-4b45-8f05-6f719b70968c" alt=""><figcaption></figcaption></figure>

5. Click the button of the part that you would like to edit and send the text / image as the replacement for the placeholder.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2F6u2ofI71WwGgWouoEbfE%2F5.png?alt=media&amp;token=70d0bafd-6413-47c5-a832-3cb5abb1c32a" alt=""><figcaption><p>Image replacement</p></figcaption></figure>

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FwrfnlfcD7HMk1Ukz9RVM%2F6.png?alt=media&amp;token=8f3830a9-66fa-4825-aa40-36d1a1b2cb09" alt=""><figcaption><p>Text replacement</p></figcaption></figure>

6. Customize the website with background colours to match your branding.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FsMDI29CbxIw5pvvMUfmG%2F7.png?alt=media&amp;token=2a61f557-4ac7-4c5f-a48d-a9b67d8231df" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
For  custom hex colors please provide them in format 000000 without the hashtag prior to the code.
{% endhint %}

7. Go through and fill in all of the elements that need to be customized with your links, text and headers + images.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FlP0wvxAJaOZzdUi1EiYh%2F8.png?alt=media&amp;token=d46848b7-cafd-4742-9d46-7ad92a30497d" alt=""><figcaption></figcaption></figure>

8. After all have been filled in you can finalize the website and generate the source code.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FMcJX6lzAwCdHiCrBgR9Q%2F9.png?alt=media&amp;token=a275d9c8-d6f2-4005-95e9-dd4bb5068407" alt=""><figcaption></figcaption></figure>

9. Download your website source code and you are ready to upload your site.

<figure><img src="https://418274219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU2XN1EtRSgaS9IfhX3sE%2Fuploads%2FWg7Qwlmtic9lsNqpC5Bt%2F10.png?alt=media&amp;token=7266e256-45b0-44dc-aa2b-79c99cadcaa9" alt=""><figcaption></figcaption></figure>