X hide

Creating Banner On External Website

From Plumrocket Documentation

You are viewing:  Banner-pro-wiki-icon-32.png  Banner Pro

Contents

Configuring Magento Banner on External Website

In this article you will learn how to create Banner on External Website in your Magento Banner Pro Extension.


Attention green.png Important Information:

Before you proceed with creating Banner On External Website, please, make sure you have already created a campaign and a banner group for this banners.


Creating Placeholder

In order to create a banner on external website, you need to create a specific type of a placeholder for this banner.


Description.png Detailed description:
  1. In your Magento admin panel go to "Plumrocket" tab.
  2. Select "Manage Placeholders" section. In this tab press on the "Add New Placeholders" button.
  3. "Name": specify the name of a placeholder.
  4. "Status": option allows to enable or disable a placeholder.
  5. "Location": option allows you to set the location of a placeholder. As an example we have set "Custom (for Developers)" location for a banner on an external website.
  6. "Type": select "Static Banner" type for this banner.
  7. "Banner sort order:" specify the sort order in which banners will be displayed in this placeholder: "By Priority or "Random".
  8. Save your placeholder by pressing on the "Save Placeholder"' button.


1 magento banner pro banner on external website.jpg


Description.png Detailed description:
  1. Once you have saved the placeholder, you may create a banner within this tab. Go to "Banners" tab.
  2. Press on the "Add New Banner" button.


2 magento banner pro banner on external website.jpg


Description.png Detailed description:
  1. "Name": specify the name of the banner in this field.
  2. "Status": option allows you to enable or disable a banner.
  3. "Banner Group": field shows you the banner group this banner is assigned to.
  4. "Placeholder": in this field you need to select the newly created placeholder. In our case it is the "External Websites" placeholder which we have previously created.
  5. In the "Show Only On Product Pages" field you may choose whether the banner will be displayed on the product pages only.
  6. Input the number in the "Priority" field. Note: The smaller the number - the higher is the priority. Banners with the highest priority will be displayed in banner sliders and static banners first.
  7. "Destination URL": enter the url where the visitor will be redirected to after clicking on the banner.
  8. Select Image or HTML banner type in the "Banner Type" field.
  9. After you selected Image banner type, upload an image file of your banner.
  10. For SEO purposes you may specify the alt tag and/or tag link in the "Image Title" field.
  11. "Target": field allows you to select in which way the destination URL will be opened (e.g. in a new window or tab).
  12. Press "Save Banner" to save your settings.


4 magento banner pro banner on external website v1.jpg


Getting Code

Once you have created a placeholder and a banner you can get a code of this banner in order to display it on external resources.
In the main menu go to "Plumrocket" -> "Manage Placeholders" section -> find "External Websites" placeholder you have previously created.


Description.png Detailed description:
  1. Go to "Get Code" tab.
  2. Select "Display Banner on External Websites" section.
  3. Copy this code in order to use it on the external websites.


3 magento banner pro banner on external website.jpg


Placing Banner on External Website

We used a website built on the Wordpress content management system. You can read more information on this content management system here.


Description.png Detailed description:
  1. As an example we will place our banner here.


Magento banner pro external website wordpress example 1 v1.jpg


Log into the backend of your Wordpress website.


Description.png Detailed description:
  1. "Go to "Dashboard".
  2. Select the "Appearance" tab.
  3. Navigate to the "Widgets" section.


Magento banner pro external website wordpress example 2.jpg


Description.png Detailed description:
  1. As an example we have created "Ads" block in the right sidebar of the page.
  2. In the "Content" field you need to paste the code copied from the Magento Admin Panel.
  3. Press "Save" button to save the changes.


Magento banner pro external website wordpress example 3 v1.jpg


Description.png Detailed description:
  1. This is how your banner will be displayed on the frontend of the external website.


Magento banner pro external website wordpress example 4 v1.jpg


Banner Pro Extension for Magento Banner Pro Extension for Magento

Navigation