--- title: Shopping integration description:   An online publication is a very effective advertising tool. Users easily spend over a minute browsing through and interacting with its content. They are also a very effective tool for e-commerce. Yo --- [Skip to content](https://support.publitas.com/shopping-integration#main-content) - [English](https://support.publitas.com/shopping-integration) - [Deutsch (German)](https://support.publitas.com/de/shopping-integration) - [Español (Spanish)](https://support.publitas.com/es/integración-de-compras) - [Nederlands (Dutch)](https://support.publitas.com/nl/shopping-integration) English Show submenu for translations [Contact Support](https://support.publitas.com/kb-tickets/new?hsLang=en) ![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=175&height=57&name=Publitas%20blue-270.png) Open main navigation Close main navigation - - [English](https://support.publitas.com/shopping-integration) - [Deutsch (German)](https://support.publitas.com/de/shopping-integration) - [Español (Spanish)](https://support.publitas.com/es/integración-de-compras) - [Nederlands (Dutch)](https://support.publitas.com/nl/shopping-integration) English Show submenu for translations - [Contact Support](https://support.publitas.com/kb-tickets/new) - [Back to Publitas](https://www.publitas.com/) [Back to Publitas](https://www.publitas.com/) How can we help you? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://support.publitas.com/?hsLang=en) 2. [E-commerce & Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en) 3. [E-commerce Solutions](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#e-commerce-solutions) # Shopping integration ***Available in Enterprise*** An online publication is a very effective advertising tool. Users easily spend over a minute browsing through and interacting with its content. They are also a very effective tool for e-commerce. You can use hotspots to connect each product to its corresponding product detail page (PDP) on your website, boosting online sales. Using our API, you can assign a custom action to each hotspot and create a seamless integration between the online publication and your online store. ### How it works The easiest way to support shopping directly from online publications is by connecting the hotspots to components that already take care of your site's shopping journey. Consider the add-to-cart function, product detail page (PDP), or better yet, a quick-view PDP. To achieve a successful connection, we recommend [embedding the publication onto your website](https://support.publitas.com/embedding-a-publication-on-your-website?hsLang=en). Using the Code Injection feature, it is possible to customize and manipulate the publication reader's standard behavior and appearance and improve the User Experience to your business needs. You can find the *Code Injection* feature located under the *Advanced Settings* tab of the *Content Presentation Settings* menu in Publitas. With the [Viewer Javascript API](http://publitas.github.io/docs/js.html), you can intercept the hotspot interactions and assign a custom action to both the [Link hotspots and Product hotspots](https://support.publitas.com/adding-hotspots-to-your-publication?hsLang=en). Depending on the industry and business requirements, there are generally three ways to set up a shopping integration: 1. [Add to cart using the call to action button](https://support.publitas.com/shopping-integration#One) 2. [Embed your website’s PDP in an iframe](https://support.publitas.com/shopping-integration#two) 3. [Use the QuickView widget on your website](https://support.publitas.com/shopping-integration#three)   ### 1. Add to cart using the call to action button By default, the Product hotspot loads the product details in a popup window generated by Publitas. It uses a call to action (CTA) button that opens your PDP in a new window. By assigning a custom action to the CTA button, it can add the product to your website's shopping cart instead. You will need to embed the publication on the website to achieve these results. The necessary product details are available in the hotspot, like the product ID obtained from the product feed. ![CleanShot 2023-12-14 at 06.42.41](https://support.publitas.com/hs-fs/hubfs/CleanShot%202023-12-14%20at%2006.42.41.gif?width=589&height=499&name=CleanShot%202023-12-14%20at%2006.42.41.gif) **Necessary elements** - **[setProductCtaAction()](http://publitas.github.io/docs/js.html#custom-product-action) **- Used to intercept clicks on the CTA button in Publitas' popup window and execute add to cart logic. - **[product.webshopIdentifier](http://publitas.github.io/docs/rest-v1.html#product)** - Used to obtain the product ID. Want to learn more? Contact your Customer Success Manager or reach out to our support team. ### 2. Show the PDP in an iframe With this option, you load the original PDP in an iframe, including all buying options, like adding to the cart, checking the stock status, and selecting a size, color, and quantity. Ideally, you want to create and show a stripped-down version of your PDP by removing all elements that do not contribute to the desired outcome. *![CleanShot 2023-12-14 at 06.47.26](https://support.publitas.com/hs-fs/hubfs/CleanShot%202023-12-14%20at%2006.47.26.gif?width=611&height=499&name=CleanShot%202023-12-14%20at%2006.47.26.gif)* **Necessary elements** - **[setProductAction()](http://publitas.github.io/docs/js.html#custom-product-action) - Used to intercept clicks on Product hotspots and execute the logic that loads the PDP in an iframe.** - **[product.webshopUrl](http://publitas.github.io/docs/rest-v1.html#product)** - Used to obtain the PDP link. Want to learn more? Contact your Customer Success Manager or reach out to our support team. ### 3. Utilize existing product quick-view functionality If your website supports a quick shop or quick view option, you can use the embedded publications to also trigger this function when a hotspot is clicked in the publication. A product quick view is often used in list views or on landing pages of the website, allowing the user to view more details without leaving the list view or landing page. That is why it is an obvious choice to use this quick-view in online publications as well. *![CleanShot 2023-12-14 at 06.51.34](https://support.publitas.com/hs-fs/hubfs/CleanShot%202023-12-14%20at%2006.51.34.gif?width=613&height=548&name=CleanShot%202023-12-14%20at%2006.51.34.gif)* Please consider that by manipulating the Product hotspots this way, you can no longer add multiple products to the same Product hotspot. **Necessary elements** - [**setProductAction()**](http://publitas.github.io/docs/js.html#custom-product-action) - Used to intercept clicks on Product hotspots and execute the logic that opens the product quick-view.  - **[product.webshopUrl](http://publitas.github.io/docs/rest-v1.html#product)** - Used to obtain the PDP link. - **[product.webshopIdentifier](http://publitas.github.io/docs/rest-v1.html#product)** - Used to obtain the product ID. Want to learn more? Contact your Customer Success Manager or reach out to our support team. - [Managing Publications](https://support.publitas.com/managing-publications?hsLang=en#main-content) - [Create Content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-content-in-publitas) - [Managing your publications](https://support.publitas.com/managing-publications?hsLang=en#managing-your-publications) - [Editing pages](https://support.publitas.com/managing-publications?hsLang=en#editing-pages) - [Updating the Publication URL](https://support.publitas.com/managing-publications?hsLang=en#updating-the-publication-url) - [SEO](https://support.publitas.com/managing-publications?hsLang=en#seo) - [Troubleshooting](https://support.publitas.com/managing-publications?hsLang=en#troubleshooting) - [Create Adaptive content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-adaptive-content-in-publitas) - [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en#main-content) - [Using the hotspot editor](https://support.publitas.com/adding-hotspots?hsLang=en#using-the-hotspot-editor) - [Hotspots explained](https://support.publitas.com/adding-hotspots?hsLang=en#hotspots-explained) - [Hotspot automation](https://support.publitas.com/adding-hotspots?hsLang=en#hotspot-automation) - [Customizing the Reader](https://support.publitas.com/customizing-the-reader?hsLang=en#main-content) - [Reader settings](https://support.publitas.com/customizing-the-reader?hsLang=en#reader-settings) - [Branding](https://support.publitas.com/customizing-the-reader?hsLang=en#branding) - [Banners](https://support.publitas.com/customizing-the-reader?hsLang=en#banners) - [Publishing Publications](https://support.publitas.com/publishing-publications?hsLang=en#main-content) - [Sharing](https://support.publitas.com/publishing-publications?hsLang=en#sharing) - [Embedding](https://support.publitas.com/publishing-publications?hsLang=en#embedding) - [Availability](https://support.publitas.com/publishing-publications?hsLang=en#availability) - [Generating reach](https://support.publitas.com/publishing-publications?hsLang=en#generating-reach) - [E-commerce & Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#main-content) - [Importing Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#importing-product-feeds) - [Managing product details](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#managing-product-details) - [E-commerce Solutions](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#e-commerce-solutions) - [Dynamic Publications](https://support.publitas.com/dynamic-publications?hsLang=en#main-content) - [Creating dynamic content](https://support.publitas.com/dynamic-publications?hsLang=en#creating-dynamic-content) - [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en#main-content) - [The basics](https://support.publitas.com/using-publitas-interactive?hsLang=en#the-basics) - [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations) - [Publication Analytics](https://support.publitas.com/publication-analytics?hsLang=en#main-content) - [Publication Dashboard](https://support.publitas.com/publication-analytics?hsLang=en#publication-dashboard) - [Google Analytics](https://support.publitas.com/publication-analytics?hsLang=en#google-analytics) - [Other integrations](https://support.publitas.com/publication-analytics?hsLang=en#other-integrations) - [Insights & Recommendations](https://support.publitas.com/publication-analytics?hsLang=en#insights-recommendations) - [API](https://support.publitas.com/api?hsLang=en#main-content) - [Publitas API](https://support.publitas.com/api?hsLang=en#publitas-api) - [Privacy and Security](https://support.publitas.com/privacy-and-security?hsLang=en#main-content) - [Account security](https://support.publitas.com/privacy-and-security?hsLang=en#account-security) - [Cookies, privacy, and policies](https://support.publitas.com/privacy-and-security?hsLang=en#cookies-privacy-and-policies) - [Account](https://support.publitas.com/account?hsLang=en#main-content) - [Login and password](https://support.publitas.com/account?hsLang=en#login-and-password) - [Managing your account](https://support.publitas.com/account?hsLang=en#managing-your-account) - [Billing](https://support.publitas.com/billing?hsLang=en#main-content) - [Billing Details](https://support.publitas.com/billing?hsLang=en#billing-details) - [Subscription](https://support.publitas.com/billing?hsLang=en#subscription) - [Data Traffic](https://support.publitas.com/billing?hsLang=en#data-traffic) - [Partners and Integrations](https://support.publitas.com/partners-and-integrations?hsLang=en) - [Learning Center](https://support.publitas.com/learning-center?hsLang=en#main-content) - [Tutorials](https://support.publitas.com/learning-center?hsLang=en#tutorials) - [Trust & Safety](https://support.publitas.com/trust-safety?hsLang=en) [![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=100&height=32&name=Publitas%20blue-270.png "Publitas blue-270")](http://publitas.com) Copyright © 2025, Publitas B.V.