> For the complete documentation index, see [llms.txt](https://articles.optty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://articles.optty.com/universal-payment-platform/widget-configuration.md).

# Widget Configuration

## Overview

Optty offers a variety of widgets, that make it easy for you to display Payment Method options on your website.&#x20;

Integrating with Optty offers you a convenient and simple way to add more Payment Method options – and we’re always working on adding more Payment Methods to our platform.&#x20;

For an overview of how to integrate with Optty, see our [developer docs](https://docs.optty.com/).&#x20;

{% embed url="<https://vimeo.com/720373894>" %}

## Widget Content Management&#x20;

### Checkout Widget Configuration

The Checkout widget configuration pages allow you to create custom content, and display this to the consumer in real time without any additional technical development effort.&#x20;

![](/files/lRTUCSQynYgaykY4v8CO)

#### Steps to customise checkout widget

1. Log into the Optty Universal Payment Platform [Sandbox](https://retailer.qa.optty.com/) / [Production](https://retailer.optty.com/)
2. Click on [Payment Management](https://retailer.qa.optty.com/app/bnpl-management) in the left panel&#x20;
3. Select the Payment Method, and click the **Manage** button
4. Select Checkout Widget Configuration on the top panel

#### Create Content

Users can easily add and format text and images, etc to customise the content in the widget.&#x20;

![](/files/sBveQ9wk6m1oTA7XQcpU)

#### Dynamic TagDynamic tags will allow you to will display customised information based on the order.

<div align="center"><img src="/files/UUf1JAsxXF56cmwHDxym" alt=""></div>

### Product Details Widget Configuration

![](/files/KjUi9zI4oWvwdGRo8HwM)

#### Steps to customize the **Product Details** widget

1. Log into the Optty Universal Payment Platform [Sandbox](https://retailer.qa.optty.com/) / [Production](https://retailer.optty.com/)
2. Click on [Payment Management](https://retailer.qa.optty.com/app/bnpl-management) in the left panel&#x20;
3. Select the Payment Method, and click on the **Manage** button
4. Select Product Details Widget Configuration on the top Panel

![](/files/NsWVPo9IK7xpUI7o0U37)

## Widget Display&#x20;

### Footer Widget

1. Log into the Optty Universal Payment Platform [Sandbox](https://retailer.qa.optty.com/) / [Production](https://retailer.optty.com/)
2. Click on [Widget Display](https://retailer.qa.optty.com/widget-display/footer) in the left panel
3. Select  **Footer Widget** On the Top Panel

#### Enable/Disable Widget

Toggle the visibility On / OFF

![](/files/dcRGTkmTSGOtEVAWjVyq)

#### Select Theme

1. Select **Theme 1 / Theme 2**
2. Click on **Activate** Theme 1 / Theme 2

![](/files/47GUTMtMQn4pcPcR0biA)

**Theme 1**

Hover - display the Payment Method options that have been enabled in the Optty Universal Payment Platform

![](/files/G6drB4wZe31LatqqYjX2)

#### **Theme 1 Customise Options**

![](/files/GqKKwE4uCG39bO0JBlg5)

#### **Theme 2**&#x20;

Static - logo's displayed for the Payment Method options enabled on the Universal Payment Platform&#x20;

![](/files/ZoGzSjANIEqI9DFs9dwH)

#### **Theme 2 Customise Options**

![](/files/lA00klpvdcMRFviqetCp)

### Product Listing Widget

1. Log into the Optty Universal Payment Platform [Sandbox](https://retailer.qa.optty.com/) / [Production](https://retailer.optty.com/)
2. Click on [Widget Display](https://retailer.qa.optty.com/widget-display/product-listing) in the left panel
3. Select **Product Listing Widget** On the Top Panel

#### Enable/Disable Widget

![](/files/dcRGTkmTSGOtEVAWjVyq)

#### Select Theme

1. Select **Theme 1 / Theme 2**
2. Click on **Activate** Theme 1 / Theme 2

![](/files/15x1jP2JGImkwfSHcDHv)

#### **Theme 1 Customise Options**

![](/files/HqPBnJJ7sml61jBsKPTG)

#### **Theme 2 Customise Options**

### Product Details Widget

1. Log into the Optty Universal Payment Platform [Sandbox](https://retailer.qa.optty.com/) / [Production](https://retailer.optty.com/)
2. Click on [Widget Display](https://retailer.qa.optty.com/widget-display/product-details) in the left panel
3. Select **Product Details Widget** On the Top Panel

#### Enable/Disable Widget

![](/files/dcRGTkmTSGOtEVAWjVyq)

#### Select Theme

1. Select **Theme 1 / Theme 2**
2. Click on **Activate** Theme 1 / Theme 2

![](/files/ZUj39EAPnJSVcsHmDU4s)

#### **Theme 1 Customise Options**

![](/files/oou6ztRhHmMBMYclL77D)

#### **Theme 2 Customise Options**

![](/files/kgqvCufCC7zfbI8aLEbJ)

### Cart Widget

1. Log into the Optty Universal Payment Platform [Sandbox](https://retailer.qa.optty.com/) / [Production](https://retailer.optty.com/)
2. Click on [Widget Display](https://retailer.qa.optty.com/widget-display/cart) in the left panel
3. Select **Cart Widget** On the Top Panel

#### Enable/Disable Widget

![](/files/dcRGTkmTSGOtEVAWjVyq)

#### Select Theme

1. Select **Theme 1 / Theme 2**
2. Click on **Activate** Theme 1 / Theme 2

![](/files/wd8kECl6Xs6myXAkPH0h)

#### **Theme 1 Customise Options**

![](/files/PIQ17bzDJGlSDoixLvww)

#### **Theme 2 Customise Options**

![](/files/HbwS4QN6VCvX43cUfGwZ)
