1. Unifyr Admin Academy
  2. Partner Portal
  3. Custom Pages

Advanced Custom Page Editing

Avatar
Permanently deleted user
Follow

Overview

When you create a custom page for your partner portal, you have many options in the create form for adding content and formatting it to your particular business requirements or corporate branding. In addition, you can use other skills to add some advanced and dynamic formatting to your page.

For information about creating custom pages, see Create/Edit a Custom Page.

Before You Begin

Some editing options in this article require familiarity with coding languages such as HTML or JavaScript.

Add a Background Image to a Custom Page

Add a Background Image to a Content Row

Format a Background Image

Add Background Video to a Content Row

Add Display Conditions for Content Rows

Use the Custom HTML Content Block

iFrame a Webpage into a Custom Page

Add a Background Image to a Custom Page

You can add a background image to a custom page, either using one of your images or selecting from a collection of stock photos.

Page background images are not compatible with these email clients:

  • Outlook desktop on Windows.
  • Background images work on Outlook 2011 & Outlook 2016 on OS X, and on outlook.com
  • Lotus Notes 7
  • free.fr email client
  • T-Online.de email client
  • Xfinity / Comcast email client

Make sure to set a background color on all pages before setting an image. When background images are not compatible, they will be replaced with the background color.

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, navigate to the Settings tab.

  4. In the General Options section, toggle on the Background image option.

    admin_custom_page_background_image.png

  5. Insert an image using one of these methods:
    • Enter or paste a URL in the Url field.

    • Click Choose image to open the File manager and upload an image. 

      In the File manager, you can upload an image from your computer, import an image from social media or media storage apps, or search a collection of more than 500,000 high-quality stock photos. All images are published under the Creative Commons Zero license. Click Insert when you've picked the image.

      admin_custom_page_background_image_file_manager.png

  6. Select Fit to background to resize the image to fit the whole custom page. If you don't select the Fit to background option, the image will be added in its original size.
  7. If you're not fitting the image to the background (Fit to background disabled), you can choose one of these options for positioning the image:
    • Repeat - repeat the image in its original size to fill the page
    • Center - center the image in the selected area, in its original size
  8. Click Save at the top of the page to confirm the change.

Here are some examples of positioning images:

  • No positioning selected - the image is placed in the top left corner of the page

    admin_custom_page_background_image_no_positioning.png

  • Fit to background

    admin_custom_page_background_image_fit.png

  • Repeat

    admin_custom_page_background_image_repeat2.png

  • Center

    admin_custom_page_background_image_center2.png

For information on adding formatting to the background image once you've added it, see Formatting a Background Image in a Custom Page

Add a Background Image to a Content Row

You can add a background image to any content row in a custom page, either using one of your images or selecting from a collection of stock photos.

Page background images are not compatible with these email clients:

  • Outlook desktop on Windows.
  • Background images work on Outlook 2011 & Outlook 2016 on OS X, and on outlook.com
  • Lotus Notes 7
  • free.fr email client
  • T-Online.de email client
  • Xfinity / Comcast email client

Make sure to set a background color on all pages before setting an image. When background images are not compatible, they will be replaced with the background color.

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, click the row you want to edit, to highlight it (outlined in blue). The Row Properties menu opens in the right-hand panel.

  4. In the Backgrounds section, toggle on the Row background image option.

    admin_custom_page_background_image_on.png.png

  5. Insert an image using one of these methods:
    • Enter or paste a URL in the Url field.

    • Click Choose image to open the File manager and upload an image. 

      In the File manager, you can upload an image from your computer, import an image from social media or media storage apps, or search a collection of more than 500,000 high-quality stock photos. All images are published under the Creative Commons Zero license. Click Insert when you've picked the image.

      admin_custom_page_background_image_file_manager.png

  6. Use the Apply image to option to choose where to apply the image - to the content area of the row only, or to the whole row.
  7. Choose whether to fit the image to the whole area you've selected. Select Fit to background to resize the image to fit the width of the selected area. If you don't select the Fit to background option, the image will be added in its original size.
  8. If you're not fitting the image to the background (Fit to background disabled), you can choose one of these options for positioning the image:
    • Repeat - repeat the image in its original size across the selected area
    • Center - center the image in the selected area, in its original size
  9. Click Save at the top of the page to confirm the change.

Here are some examples of positioning images:

  • Apply image to: Row

    admin_custom_page_background_image_row.png

  • Apply image to: Content area

    admin_custom_page_background_image_content_area.png

  • Apply image to: Content area and Fit to background enabled

    Note that the image only resizes to fit the width of the content area, its aspect ratio is maintained so it's overrunning the row.

    admin_custom_page_background_image_fit_background.png

  • Apply image to: Content area, Fit to background disabled and Repeat enabled

    admin_custom_page_background_image_repeat.png

  • Apply image to: Content area, Fit to background disabled and Center enabled

    admin_custom_page_background_image_center.png

For information on adding formatting to the background image once you've added it, see the Format a Background Image section of this article.

Format a Background Image

You can format the background image set for a custom page - add custom filters, text, drawings, shapes, stickers, frames, and corners, and resize, crop, and rotate it.

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, go to one of these areas, depending on where the background image is used: 
    • For the whole page - Go to the Settings tab in the right-hand panel, and scroll to General Options > Background image.
    • In a content row - Click the row that contains the background image, to highlight it (outlined in blue). The Row Properties menu opens in the right-hand panel. Scroll to Backgrounds > Row background image.

  4. Click Apply effects.

    admin_custom_page_background_image_apply_effects.png

    The image editor opens.

    admin_custom_page_background_image_image_editor.png

  5. Make changes as required:
    • Filter - add color filters
    • Resize - add a new size for the image, with the option to maintain its aspect ratio when resizing
    • Crop - crop the image by dragging its edges as required or selecting a prescribed aspect ratio (e.g. 3:2)
    • Transform - rotate the image clockwise or counter-clockwise, or invert it
    • Draw - add freehand marks to the image

    • Text - add text to the image

      Click Add Text to add a text box.

      Double click on the text in the text box (as a default, it contains Double click here) and update it as required. Use the toolbar options to set the text color and the font.

      Use the + and   to access formatting options for the text box - shadow, outline, background color, etc.

      admin_custom_page_background_image_text.gif

    • Shapes - add pre-drawn shapes such as arrows, stars, and squares 
    • Stickers - add predefined stickers/emoticons
    • Frame - add a predesigned frame
    • Corners - define the radius of corners in the image
  6. Click Apply in any of the tabs to apply the effects.
  7. Click Save at the top of the page to confirm the change.

Add Background Video to a Content Row

You can add a background video to your pages, linking to a video hosted on a platform such as YouTube.

Be sure to set a background color on all pages before setting a video. When background videos are not compatible, they will be replaced with the background color.

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, click the row you want to edit, to highlight it (outlined in blue). The Row Properties menu opens in the right-hand panel.

  4. In the Backgrounds section, toggle on the Row background video option.

    admin_custom_page_background_video_on.png

  5. Enter or paste the URL to the video in the Url field.
  6. Click Save at the top of the page to confirm the change.

Add Display Conditions for Content

Display conditions allow you to tailor the display of content in your custom pages. You can apply conditional statements based on your Partner Groups to the content rows in a page, to show different content based on the recipient or viewer of the page. A row will only be displayed if the viewer meets the conditions. For example, you could limit access to pricing based on partner group membership, provide translated content for your partners in different countries, or only display sensitive data to a subset of your partner population.

Note: To restrict access to the whole page, not just to parts of its content, you can select a partner group as the Visibility setting for the page in the portal navigation. For more information, see Manage Visibility of Pages in a Partner Portal.

You have two options for display conditions:

  • Use a default display condition -  Unifyr One provides a display condition option for every one of your active Partner Groups. You can choose one and apply it to a content row.
  • Create a custom display condition - You can use HTML code and partner group IDs to create your own custom display condition for a content row. With this option, you can use a combination of Partner Groups to create the condition.

Apply a default display condition to a content row

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, click the row that you want to filter, to highlight it (outlined in blue). The Row Properties menu opens in the right-hand panel.

  4. In the Dynamic Content section, click Select condition.

    admin_custom_page_display_condition.png

  5. Select the required display condition from the drop down list. The list includes a display condition for each of your active Partner Groups.

    admin_custom_page_display_condition_select.pngg

    Once selected, the description of the condition displays in the Display condition field.

    admin_custom_page_display_condition_added.png

    For information on creating a display condition for users who AREN'T in a partner group, see Creating a display condition for users who are NOT in a Partner Group.

  6. To remove the display condition from the row, click Delete.
  7. Click Save at the top of the page to confirm the change.

Apply a custom display condition to a content row

  1. Display conditions are based on Partner Groups. You need the ID of each Partner Group that will form the display condition - to get it, open the partner group from Partner Management > Partner Groups and copy the ID from the end of the Unifyr One URL.  Paste each ID to a basic text editor such as Notepad.  

    For example - to get the ID of the partner group that represents French partners:

    admin_partner_group_get_ID.png

  2. Navigate to Partner Portal > Custom Pages.
  3. Open the custom page you want to edit.
  4. In the WYSIWYG content editor area, click the row that you want to filter, to highlight it (outlined in blue). The Row Properties menu opens in the right-hand panel.

  5. Scroll down to the Dynamic Content section and click Add condition.

    admin_custom_page_display_condition_create.png

  6. In Add a new display condition, complete this information:

    Filter Description 
    Name The name of the condition.
    Description A summary of the condition - for example, list the partner groups that make up the condition.
    Before

    Paste HTML code representing the condition into the field, replacing #### with the IDs of the partner groups that will form the condition.

    Note

    Ensure that you use straight quote marks, not curly ones.

    For a condition based on matching a single partner group:

    <span ng-if="partnerGroups.includes('####')">

    For a condition based on matching multiple partner groups (for example, one based on 2):

    • AND statement (all partner groups must apply):

      <span ng-if="partnerGroups.includes('####')&&partnerGroups.includes('####')">

      You add a &&partnerGroups.includes('####') entry to the if statement for each additional partner group after the first one.

      For example, this is the line of code for a display condition based on the Partner Group IDs 8a9982f18a2532f6018a286f03f40490 and 88b48a94f56b4c0c88054d93d7976eb1

      <span ng-if="partnerGroups.includes('8a9982f18a2532f6018a286f03f40490')&&partnerGroups.includes('88b48a94f56b4c0c88054d93d7976eb1')">

    • OR statement (at least one of the partner groups must apply):

      <span ng-if="partnerGroups.includes('####')||partnerGroups.includes('####')">

      You add a ||partnerGroups.includes('####') entry to the if statement for each additional partner group after the first one.

    For information on creating a display condition for users who AREN'T in a partner group, see Creating a display condition for users who are NOT in a Partner Group.
    After

    Paste this HTML code into the field:

    </span>

    admin_custom_page_display_condition_new2.png

  7. Click Save. The display condition is listed, with its description, in the Display condition field for the row.  It includes the label CUSTOM.

    admin_custom_page_display_condition_custom.png

  8. To remove the display condition from the field, click Delete.
  9. To review or update the syntax the condition, click Edit.
  10. Click Save at the top of the page to confirm the change.

Creating a display condition for users who are NOT in a Partner Group

The instructions in the sections above create display conditions that match users who are members of particular Partner Groups.

If you want to provide content for users who aren't in certain Partner Group or Groups, follow the instructions above to create the condition, then go to the Before HTML code and manually add a ! before each PartnerGroups snippet that should be an "is not a member of" statement.

admin_custom_page_display_condition_not_in_group.png

Use the Custom HTML Content Block

HTML Experts Only

Using your own code may affect how the custom page is rendered. Make sure to use correct and responsive HTML.

The custom HTML content block allows you to add more customizable content or use display options that aren't available in the standard page editor. You can control text formatting, add HTML 5 videos and anchor links, add effects from CSS, and add live content from external providers. The use of JavaScript is supported.

To add a custom HTML block:

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, add an HTML content block.

  4. Click in the HTML content block, to highlight it (outlined in blue). The HTML editor opens in the right-hand panel, displaying some placeholder code.

    admin_custom_page_html.png

  5. Add the HTML code that provides the effect you want. The editor automatically color-codes syntax and indents code to improve readability. Click EXPAND to open a bigger workspace, if required.
  6. Click Save or Save and Close at the bottom of the page to confirm the change.

Tip

You can use merge tags in a custom HTML block, and they will be respected in output.

Use the merge tag picker to add the merge tag you want to a different content block, for example a Paragraph, then copy the resulting tag into the HTML block.

admin_custom_page_html_merge_tag.png

iFrame a Webpage into a Custom Page

HTML Experts Only

Using your own code may affect how the custom page is rendered. Make sure to use correct and responsive HTML.

You can use an iframe in an HTML block to embed another document into your custom Unifyr One page. The option is commonly used to display content from another website or web page.

Note

Not all web pages can be iframed. Websites are built according to CSP (Content Security Policy) rules - part of these regulations is to permit or prevent the pages being referenced in frames elsewhere. 

If your page can't be iframed, you will see a glyph instead of the page content in the iframe.

admin_custom_page_iframe_not_permitted.png

To iframe a webpage:

  1. Navigate to Partner Portal > Custom Pages.
  2. Open the custom page you want to edit.
  3. In the WYSIWYG content editor area, add an HTML content block.

  4. Click in the HTML content block, to highlight it (outlined in blue). The HTML editor opens in the right-hand panel, displaying some placeholder code.

    admin_custom_page_html.png

  5. Add HTML code for your iframe. Here is a basic example: it iframes in www.example.com/default, and sizes the frame to 500x300. Adding a title is optional but can be used to provide a description of the iframed content for screen readers. Refer to your HTML resource for further information.

    <iframe src="https://www.example.com/default" title="a sample page from example.com" 
width="500" height="300"></iframe>
  6. Click Save or Save and Close at the bottom of the page to confirm the change.

 Training

Learn more with our training course:

You will be prompted to log into your CustomerONE account to access the link.

Related Topics

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.