# Widget Configuration ## Overview Optty offers a variety of widgets, that make it easy for you to display Payment Method options on your website. 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. For an overview of how to integrate with Optty, see our [developer docs](https://docs.optty.com/). {% embed url="" %} ## Widget Content Management ### 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. ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FUCZJ6saHGGAqLeg33DiV%2Fimage.png?alt=media\&token=3cc6c1e6-a54e-4c81-a90a-04115c191d99) #### 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 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. ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FeBEOiInocQ0VJZUjlbpp%2Fimage.png?alt=media\&token=8749bb3a-2df8-4e5c-9d56-31abad756be7) #### Dynamic TagDynamic tags will allow you to will display customised information based on the order.
### Product Details Widget Configuration ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FK5Ezm3xxxTE9F4f0JXb9%2FPDP-widget.gif?alt=media\&token=a7886d59-26f4-4713-8630-166d58d05ff0) #### 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 3. Select the Payment Method, and click on the **Manage** button 4. Select Product Details Widget Configuration on the top Panel ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FkzoWZd24Vo9xVQHX62cm%2Fimage.png?alt=media\&token=89e808a8-c3b0-449a-bd5d-e70618c3ba93) ## Widget Display ### 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 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FQhqZGOBzdiZqSoBNoY4o%2Fimage.png?alt=media\&token=ffbbfc3e-8a34-4562-b48d-3788e2432bb8) #### Select Theme 1. Select **Theme 1 / Theme 2** 2. Click on **Activate** Theme 1 / Theme 2 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FJUbB7UrF3eUcJP5yIz8y%2Fimage.png?alt=media\&token=b8cf8bfe-21c4-497f-ab0f-c8e32c192c6a) **Theme 1** Hover - display the Payment Method options that have been enabled in the Optty Universal Payment Platform ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FFnq71x63yZgvwg9wRTTg%2Ffooter-widget.gif?alt=media\&token=6660a61c-be9d-406f-bf95-b5b27939e95c) #### **Theme 1 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FTvNSNkbUMtuv6TDaXyUM%2Fimage.png?alt=media\&token=7dc0c3fb-d638-4404-93ab-a7a781933355) #### **Theme 2** Static - logo's displayed for the Payment Method options enabled on the Universal Payment Platform ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FFbN6LvM9u4R8u2GeTIUI%2Fimage.png?alt=media\&token=fc9b3573-f324-46ea-bd87-c3bba3e8d81f) #### **Theme 2 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FczBtv5yOwSvX70ciefbw%2Fimage.png?alt=media\&token=d546fefb-a8bc-4a33-9180-1762933e0803) ### 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 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FQhqZGOBzdiZqSoBNoY4o%2Fimage.png?alt=media\&token=ffbbfc3e-8a34-4562-b48d-3788e2432bb8) #### Select Theme 1. Select **Theme 1 / Theme 2** 2. Click on **Activate** Theme 1 / Theme 2 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FjCt5ZEJkEPsOLuTtYoa9%2Fimage.png?alt=media\&token=6fb29696-499f-4489-bfed-330248c0b7c3) #### **Theme 1 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2Fr2XZWC0or0xv6O9OEzKI%2Fimage.png?alt=media\&token=f46cb370-d6ae-4d8f-9616-5ddfc32b2579) #### **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 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FQhqZGOBzdiZqSoBNoY4o%2Fimage.png?alt=media\&token=ffbbfc3e-8a34-4562-b48d-3788e2432bb8) #### Select Theme 1. Select **Theme 1 / Theme 2** 2. Click on **Activate** Theme 1 / Theme 2 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2F4wUVOK6ZsAYS43FcR6tw%2Fimage.png?alt=media\&token=72b9f2bc-ee64-49b8-adaf-bd0244348272) #### **Theme 1 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2F3uFsUHR9jKBPTfoxlYXi%2Fimage.png?alt=media\&token=176eb503-194d-4990-b2f4-6c5808147510) #### **Theme 2 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FJllpQpHinvbBNvn8c5wA%2Fimage.png?alt=media\&token=f908fa50-3d05-4443-b112-4330c33f57a2) ### 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 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FQhqZGOBzdiZqSoBNoY4o%2Fimage.png?alt=media\&token=ffbbfc3e-8a34-4562-b48d-3788e2432bb8) #### Select Theme 1. Select **Theme 1 / Theme 2** 2. Click on **Activate** Theme 1 / Theme 2 ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2Fmw9wK0q5ZYRvJnjdZjgT%2Fimage.png?alt=media\&token=1c1fbba0-8a78-4fcc-ab15-b31b541d1674) #### **Theme 1 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2Fpw4GKhQDCSbLMZeOzETq%2Fimage.png?alt=media\&token=eb7daeae-7d82-46d7-b081-152a48b80178) #### **Theme 2 Customise Options** ![](https://2049967326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEsClw1fGj5plfYN4DpLJ%2Fuploads%2FjpHCXyQzHAJnRkGOO4kL%2Fimage.png?alt=media\&token=70a130bc-c7c3-4f32-a33e-4a7385e3c05f)