> For the complete documentation index, see [llms.txt](https://catchonlabs.gitbook.io/catchon-labs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://catchonlabs.gitbook.io/catchon-labs/catchon-pad/integrate-with-webflow.md).

# Integrate with Webflow

Hook up web3 app into my own webflow website

## Set up webflow page

1. Open webflow and stylize webflow website. <https://webflow.com/> (we will our our template an example.)&#x20;
2. Go to Catchon website and copy the integration section code. Here is our template website: <https://webflow.com/made-in-webflow/website/box-cat-planet-d730b5d2aee3ddfc2a788c86>
3. Go to webflow designer page. Add an **embedded** code section. **Copy and paste** the integration section into code editor. Click **Save**.<br>

   <figure><img src="https://2931448708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYPVZSttVKH3Jq2o2xs35%2Fuploads%2FZdTbhF7YyhzKeDgt5U9A%2Fembeded.gif?alt=media&amp;token=1d66e36e-22a6-4f17-bc5d-36bcaaca5f83" alt=""><figcaption></figcaption></figure>
4. Create a connect wallet button. \
   Go to element setting -> **custom attributes**, then click add. Input name "**connectbutton**" and value 0.<br>

   <figure><img src="https://2931448708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYPVZSttVKH3Jq2o2xs35%2Fuploads%2FxJRaSdLbU81RbhcO3dQH%2Fconnect%20button.gif?alt=media&amp;token=71ad0a4a-c3a1-4128-b843-cda579fd3361" alt=""><figcaption></figcaption></figure>
5. Create a mint button. \
   Go to element setting -> **custom attributes**. then click add. Input name "**mintbutton**" and value 0.<br>

   <figure><img src="https://2931448708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYPVZSttVKH3Jq2o2xs35%2Fuploads%2FqNG7UDYmXQTgTmWYUHDw%2Fmintbutton.gif?alt=media&amp;token=c255c79e-f0d8-41ce-9760-6ad7ca45ecd1" alt=""><figcaption></figcaption></figure>
6. Click **Publish** and then choose the domain to publish.<br>

   <figure><img src="https://2931448708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYPVZSttVKH3Jq2o2xs35%2Fuploads%2FUWvZdg2D27IGlqcempVF%2Fpublish.gif?alt=media&amp;token=1668be84-6ce8-4e3e-b2bd-a014ddb30340" alt=""><figcaption></figcaption></figure>

You are all set! Now we can use the website to mint NFTs.

## Test minting now!

<figure><img src="https://2931448708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYPVZSttVKH3Jq2o2xs35%2Fuploads%2FQDY3iGadsP2SJFnt4irO%2Fmint.gif?alt=media&amp;token=a4c49c39-e782-4108-a91f-37dbafe11186" alt=""><figcaption></figcaption></figure>

After someone mints NFTs, we can find the updated mint information in Catchon panel.

<figure><img src="https://2931448708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYPVZSttVKH3Jq2o2xs35%2Fuploads%2F5weA7LdchrvuSJvq8BIi%2FScreen%20Shot%202022-12-05%20at%206.53.41%20PM.png?alt=media&amp;token=4aadf77c-c5dd-440d-b13f-ae323fc2ad12" alt=""><figcaption></figcaption></figure>

The NFT creator can withdraw NFT sales money from smart contract by clicking **withdraw money** button.
