Classic buy buttons: Cart links, buttons, widgets and the lightbox # Buy buttons and links > DPD's classic embed codes, cart links, buttons, widgets and price choosers, and the lightbox they open. Before the [embed components](../components/), DPD’s embed codes were cart links that open the cart in a lightbox over your page. They still work, and the button code page in the DPD admin still makes them. If you’ve had DPD buttons on your site for years, this is what you’ve got. Every embed code is an `` tag with the dpd.js script tag after it: ```html Add to cart ``` You only need the script tag once per page, but pasting it more than once does no harm. ## Kinds of embed code [Section titled “Kinds of embed code”](#kinds-of-embed-code) **Cart links.** An `` with your own text or image. dpd.js opens the link in the lightbox. **Buttons.** An ``, which dpd.js turns into a styled button with the price beside it. See [Buttons and widgets](customize/). **Widgets.** An ``: a product card with an image, name, price, description and buy button. Also in [Buttons and widgets](customize/). **Price choosers.** A `` of a product’s prices inside a `.dpd-selectomatic` wrapper. Picking a price (or clicking the button under it) opens that price’s cart link in the lightbox. ## Where a link goes [Section titled “Where a link goes”](#where-a-link-goes) The button code page builds each link for you. The parts you can change by hand are the query parameters: | Parameter | | | ------------------ | ---------------------------------------- | | `product_id` | The product. | | `method_id` | The product’s price (`/cart/add` links). | | `product_price_id` | The product’s price (`/cart/buy` links). | | `coupon` | A coupon code to apply. | `/cart/add` adds the product and shows the cart. `/cart/buy` skips the cart and goes straight to checkout with just that product. `/cart/view` shows the cart as it is. ## The lightbox [Section titled “The lightbox”](#the-lightbox) Cart links and buttons open the cart in a lightbox, an overlay on your page, so the visitor never leaves your site until they pay. * `data-lightbox="0"` on a cart link makes it a normal link to the cart page. * On buttons and widgets the lightbox is off unless the code has `data-lightbox="1"` (the button code page’s lightbox setting). * On iPhones and iPads the lightbox is always off, and links go to the cart page. * Ctrl-click or Cmd-click opens the cart in a new tab as usual. ## Use the drawer instead [Section titled “Use the drawer instead”](#use-the-drawer-instead) Add `data-dpd-mode="inline"` to a cart link and it adds the product with the [embed components’](../components/) cart drawer in place of the lightbox. It’s an easy way to try the new cart without changing your links. The link needs to be a `/cart/add` link, and your site needs to be one of your store’s [embed domains](../components/embed-domains/). ```html Add to cart ``` ## Embed codes added later [Section titled “Embed codes added later”](#embed-codes-added-later) dpd.js builds the buttons and widgets that are on the page when it loads. If your page adds embed codes afterwards (a single-page app, or content loaded with JavaScript), call `dpd.buildEmbed()` once they’re in the page: ```js dpd.buildEmbed('#new-products'); // a CSS selector dpd.buildEmbed(someElement); // or an element ``` It builds each embed code only once, so calling it again is safe. # Buttons and widgets > Every data attribute DPD's classic buttons and widgets read, and the class names you can style. The button code page in the DPD admin writes these attributes for you, but you can change them by hand. Colors are hex without the `#`, like `469d3d`. ## Buttons [Section titled “Buttons”](#buttons) ```html Add to cart ``` | Attribute | | | --------------------- | ---------------------------------------------------------------------------------------------------------- | | `data-dpd-type` | `button` | | `data-text` | The button’s label. | | `data-variant` | Where the price goes: `price-right`, `price-left`, `price-top` or `price-none`. Leave it off for no price. | | `data-button-size` | `dpd-large`, `dpd-medium` or `dpd-small`. | | `data-bg-color` | The button’s color. | | `data-bg-color-hover` | The button’s color under the mouse. | | `data-text-color` | The label’s color. | | `data-pr-bg-color` | The price box’s background. | | `data-pr-color` | The price’s color. | | `data-lightbox` | `1` opens the cart in the lightbox. | ## Widgets [Section titled “Widgets”](#widgets) ```html Weeknight Sauces ``` | Attribute | | | --------------------------------------------------------- | ---------------------------------------------------- | | `data-dpd-type` | `widget` | | `data-text` | The buy button’s label. | | `data-variant` | `portrait` (the default), `landscape` or `no-image`. | | `data-description` | The text under the product’s name. | | `data-bg-color`, `data-bg-color-hover`, `data-text-color` | The buy button’s colors, as for buttons. | | `data-background-color` | The widget’s background. | | `data-border-color` | Its border. | | `data-title-color` | The product name’s color. | | `data-price-color` | The price’s color. | | `data-desc-color` | The description’s color. | | `data-lightbox` | `1` opens the cart in the lightbox. | The name, price, images and “what’s included” come from the product in the DPD admin. The widget images are the ones set on the product for widgets. ## Styling with CSS [Section titled “Styling with CSS”](#styling-with-css) Buttons and widgets are ordinary HTML in your page, so your own CSS can style them. Their class names start with `_dpd-` and won’t change: | Class | | | ------------------------------------------ | ----------------------------------------------------------------------- | | `._dpd-button_container` | The whole button. Also has its size class, like `.dpd-large`. | | `._dpd-button_cta_text` | The button itself, with its label. | | `._dpd-button_price` | The price box. | | `._dpd-widget_container` | The whole widget. Has `._dpd-widget_landscape` in the landscape layout. | | `._dpd-widget_image` | The image. | | `._dpd-widget_title`, `._dpd-widget_price` | The name and price. | | `._dpd-widget_description` | The description. | | `._dpd-widget_includes` | What’s included. | | `._dpd-widget_secure` | The “Secure Checkout by DPD” line. | ```css ._dpd-button_cta_text { border-radius: 999px; font-family: inherit; } ```