How To Customize Eloqua’s Out-Of-The-Box Subscription Management Page

February 17, 2022 Stan

If your subscribers want to manage which emails they do and don’t receive, Eloqua comes with a standard subscription management page that gets the job done. Out of the box, though, it leaves a lot to be desired visually. Luckily, with some basic Front End Development knowledge you actually have a lot of flexibility in how you can customize it.

To find the subscription management page within your Eloqua instance, navigate to Assets > Email Setup > Email Groups. In the upper right-hand corner of the Email Groups page, there is a button labeled “Edit & Preview Page”.

Clicking this will bring up a modal dialog box, and that is where you will do your editing. If you click “Preview”, another modal will pop up showing you what the page looks like.

Here is a basic description of what these fields will change on your subscription management page, straight from the Oracle docs:

Status Changed Text: The message that is displayed at the top of the Subscription Management Page when a contact makes changes to their preferences. For example, “Your status has changed” or “Your subscription preferences have been saved.”

Status Text: Text that appears at the top of the screen followed by the recipient’s email address. For example, “<You are logged in as:> [email protected]” where <You are logged in> is the text in this field.

Subscribed Message: Text that confirms when a contact subscribes to one or more email groups. The text appears after they submit their changes.

Unsubscribed Message: Text that confirms when a contact unsubscribes from one or more email groups. The text appears after they submit their changes.

Choose From List Text: The header text above the list of email groups available to the contact. When a user selects a check box in this area, they opt to subscribe to that email group. For example, “Subscribe” or “Select from these email groups.”

Unsubscribe Text: The header text above the unsubscribe check box. For example, “Unsubscribe” or “Select this check box to unsubscribe from all email groups.”
Unsubscribe Checkbox Text: Name of the “unsubscribe from all” check box. If a contact selects this check box, they are automatically unsubscribed from all email groups on this page (and all email group check boxes are deselected). For example, “Unsubscribe” or “Unsubscribe from all groups.”

Button Text: Text that appears on the button a contact clicks in order to save their subscription preferences. For example, “Save” or “Submit Changes.”

The real magic lies in Top HTML Style Tags and Bottom HTML Style Tags. These fields let you drop your own HTML into the top and bottom of the page, which allows you to add your own custom CSS, add new elements to the page, and write JavaScript for extended functionality.

The Top HTML Style Tags field injects any HTML that you write, right into the page’s HTML after the DOCTYPE and opening <html> tags. This means you can add in a <head> section with <meta> tags, <style> tags, etc, but you can also add in the opening <body> tag and then any HTML elements you want to appear at the top of the page, like a custom header or logo. Anything you add here will be placed right at the top of what you see in the page preview.

The Bottom HTML Style Tags field works in a similar fashion, except at the bottom of the page. It will let you add in any additional HTML elements you want, and they will appear right at the bottom of the page preview. This is a great spot to add in some <script> tags for some custom JavaScript functionality. Once you are done, include your closing </body> tag and you’ll be all set.

To get the most out of these, you’ll have to open up the preview modal and get comfortable working with your browser’s developer tools (you can learn more here and here). For this example I am using Google Chrome, but all of the other major browsers have similar developer tools so you should be able to translate these steps to your browser of choice.

To open up the developer tools in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). From there, click on the “Elements” tab at the top and you should see all of the HTML elements on the page, as well as all of the styles being applied to whichever element is currently selected.

This is a great spot to “practice” your CSS changes before you apply them, since you can add/delete/edit styles right in this window and see how they affect the page in real time. Once you’ve made a change here that you are happy with, write it down in a separate word doc or note somewhere, close out of the preview, and add it inside your <style> tags in the Top HTML Style Tags field. Now when you click “Preview” again, you should see your changes applied to the page.

Once you are happy with your changes, hit “Save” and they will be live.

Its worth mentioning a couple of important notes:

If left inactive for too long, Eloqua will log you out. So make sure you save your progress from time to time, or you run the risk of losing all of your work.
Each Eloqua instance can only have one subscription management page, so it will have to be generic enough to encompass your entire business (in case you have multiple brands under one umbrella).

Although its initial state leaves a lot to be desired, Eloqua’s out of the box subscription management page is capable of handling a lot of customization. If you need assistance with yours, or you are interested in having a preference center purpose-built, reach out to us, we’d love to help!

Thank you for subscribing!