> For the complete documentation index, see [llms.txt](https://docs.virgo.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.virgo.net/widget/integration.md).

# Integration

Virgo Widget is a developer toolkit permitting crypto projects to make their token buyable directly from their website.

With Virgo Widget, you can increase your website's conversion rate, and holders count in a few lines of code, free of charge! We handle all the hard work: Fiat payments, cross-chain swaps, regulations and compliance...

We currently support Ethereum, Polygon, and Binance Chain, as well as 10+ fiat payment methods.

## Javascript SDK

Our simple Javascript SDK permits you to set up Virgo Widget in just a few lines of code; it is better suited for non-WordPress websites.\
If your Website runs on WordPress, please jump to the next section. We made an even easier integration solution!

### Import the library from our CDN

Add the following script to your HTML code; it contains all the required functions to display Virgo Widget.

```html
<script src="https://widget.virgo.net/js/widget.js"></script>
```

### Init the Widget

Once you have added our library, the next step is to init the Widget. Add the following code to your HTML after the library script.

```html
<script>
    virgo_initBuyBtn({
        "chainID": 56,
        "contract": "0xFb526228ff1C019E4604C7e7988C097D96bD5b70",
        //add customization options here
    });
</script>
```

Replace the value of "chainID" with the one your token is published on: \
**Ethereum: 1**\
**Binance Smart Chain: 56**\
**Polygon: 137**

Replace the value of "contract" with your token's contract address.

A "Buy YourToken" button should now appear at the bottom right of your webpage.

### Customize it

You can customize the widget appearance by adding new parameters to the above function; for example here is how to change the theme color:

```html
<script>
    virgo_initBuyBtn({
        "chainID": 56,
        "contract": "0xFb526228ff1C019E4604C7e7988C097D96bD5b70",
        "themeColor": "00FF8C",
    });
</script>
```

Here is a list of all available parameters:

| Parameter         | Description                                                                                            | Example value                                                   |
| ----------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
| themeColor        | Set the widget's theme color. Must be a hex color.                                                     | 00FF8C                                                          |
| horizontalPadding | Set the buy button's horizontal padding. Can be any valid CSS size value.                              | 1em                                                             |
| verticalPadding   | Set the buy button's vertical padding. Can be any valid CSS size value.                                | 0.375em                                                         |
| borderRadius      | Set the buy button's corners radius. Can be any valid CSS size value.                                  | 0.375em                                                         |
| position          | Set the widget's position on the web page. Can either be left, right or center.                        | right                                                           |
| horizontalOffset  | Set the widget's offset relative to the screen bottom. Can be any valid CSS size value.                | 16px                                                            |
| verticalOffset    | Set the widget's offset relative to the chose position's page border. Can be any valid CSS size value. | 16px                                                            |
| text              | Set the buy button's text. Use \[tokenSymbol] to display your token's symbol                           | Buy \[tokenSymbol] now!                                         |
| logo              | Set your token's displayed logo. Must be an URL to an image. Recommanded size: 200x200.                | <https://virgo.net/wp-content/uploads/2022/08/Sans-titre-3.png> |

## WordPress plugin

If you are using WordPress, we created a plugin that facilitates even further setting up the widget.\
[You can download it here](https://virgo.net/token-buy-widget.zip), then upload it to your WordPress installation by going to the plugins sections.

Once installed, enable it. A new menu should appear in your admin dashboard, named Token Buy widget. Access it to configure the widget.

To display the widget, there are two available options:

\- Enable the buy button in the settings, it will display a floating 'buy TOKEN' button at the bottom of the screen, on each of your website's pages.

\-  Insert the following shortcode anywhere you want to display the widget: \[display\_buy\_widget]