Find it...

    Branding themes on Pexip RP

    Follow

    1) General concepts

    For service providers or IT departments serving multiple departments with individual branding, this guide will explain how to set up the Pexip Reverse Proxy to provide different branding files for the same pool of Pexip Conferencing nodes.

    This is not the same as replacing the PIN screens and Lync avatar, for PIN images branded pr VMR, see http://docs.pexip.com/admin/themes.htm

     

    You can also use the process described in this article for putting a single branding theme on the reverse proxy to avoid updating branding on multiple conferencing nodes.

    This procedure may very well be possible on other reverse proxies, but this documentation focuses on the Pexip Reverse Proxy based on nginx.

    First configure your Reverse Proxy (and optionally the TURN server function if needed) following both of these in sequence:

    1) See this simple step-by-step instruction: https://support.pexip.com/hc/en-us/articles/201748136 and read the deployment guide to replace default certificates etc http://docs.pexip.com/rp_turn/rpturn_intro.htm

    2) Do the housekeeping parts to upgrade the OS: https://support.pexip.com/hc/en-us/articles/203598109-Reverse-Proxy-TURN-security-updates-and-housekeeping

     

    Then you are ready to start looking into branding Pexip Webapps on the RP.

    There are three main ways of doing this:
    - using subfolders under your main domain
    - using subdomains under your main domain
    - individual customer specific domains

    You can combine the above if you like as well.

    This guide will focus on the first option, but all options mentioned in this intro as options you could do, it would require following this guide as a starting point, and you can then build on that.

    Using subfolders
    It would typically look like:
    Customer 1: https://join.example.com/acmecorp
    Customer 2: https://join.example.com/contoso

    Benefits of doing this approach would be that the only required change for each new organization would be a new subfolder with uniqe files in the configuration folder.

    Using subdomains 
    It would typically look like:
    Customer 1: https://acmecorp.example.com
    Customer 2: https://contoso.example.com

    This approach can also be combined with a single wildcard certificate for *.example.com on the reverse Proxy but may require some additonal nginx rules.

    Using individual customer specific domains
    It would typically look like:
    Customer 2: https://join.acmecorp.com
    Customer 2: https://join.contoso.com

    The respective owners of these domains should point a CNAME DNS record from join.<theirdomain>.com to join.example.com (the SP domain) rather than poining to the IP-address of the reverse proxy. This way you would be able to do changes in the future. This approach requires a new certificate pr customer issued (or at least approved) by the customer, as well as some additional nginx configuration pr host.

    2) Create a folder structure on the RP

    For each branded theme you need to create a uniqe configuration folder.

    For details on the Pexip branding themes, please read this page: http://docs.pexip.com/admin/customize_webapp.htm that contains a lot of very useful details. It also explains how to replace the branding theme on the conference node. This is not required when we host it on the reverse proxy.

    The configuration folder for Pexpi branding contains the following files:

    In the subfolder /themes/default:

    • brand.css
      Contains colours (Hex format) and defines optinal background image.
    • background.jpg 
      Default filename for a background image. A background image should have a quite decent resolution, at least 1024x768, but should normally not be more than 300-600 Kb, as it would take a while to load for users on slower connections.
    • logo.png
      Logo on top of the page. Must contain a transparent background and must not be more than 300px wide.

    Directly under the configuration folder:

    • favicon.png
      Bookmark and tab icon that will show in the browser tab.
    • settings.js
      For network settings, in case i.e. the Pexip Conference node is on a different address than the default upstream servers configured in the Reverse Proxy. I.e. customer having his own local conference nodes (potentially behind a RP), but the partner/SP does the branding on their servers. Also contains settings like what default bandwidth to use for this branded site, what languages to enable etc.

    You can place the branded sites wherever you want on the RP, we will use /home/pexip/branded as a base location for these examples. You have to create a folder for each company. En this case we will make this the configuration folder for each customer, so the files described above should be put directly under each folder.

    For example:

    /home/pexip/branded/acme/

    /home/pexip/branded/contoso/

    Both containing their individual copies of:

    - settings.js *
    - favicon.png *
    - themes/default/brand.css **
    - themes/default/logo.png **
    - themes/default/background.jpg *
    - languages/en-us.json (and possibly other language files)

    ** = Mandatory, no reason to brand something if you are not rebranding this.
    * = You should have these files, but we will read from the Pexip default if they are missing

    As mentioned above, to understand what each file does, and the parameters in these files, see http://docs.pexip.com/admin/customize_webapp.htm

    For additional languages, some translations provided by customers can be found here.

    With the above folder structure in place, and at least one modified Pexip app folder in place, we can start doing changes to nginx.

     

    3) Reverse Proxy changes

    Use the command line editor nano on the reverse proxy, if you are not familiar with it, read up a bit i.e. here.

    Since this file is owned by root, we need to use sudo for all commands with this file.

    First lets make a backup of the nginx config file: 
    sudo cp /etc/nginx/sites-available/pexapp /etc/nginx/sites-available/pexapp.bak

    Now lets edit this file:

    sudo nano /etc/nginx/sites-available/pexapp

    Use the arrows and go down to the line containing:

    include /etc/nginx/includes/pex-rewrites.conf;

    We need to comment out this, insert a # in front, it should now look like this:

    # include /etc/nginx/includes/pex-rewrites.conf;

    See the highlighted line in the picture below for how this should look in your file (server name and IP-address should be what you initially configured)

     

    Now continue further down the file until you will find the section called
    # Redirect from web root to /webrtc

    If you want your default site when someone accessing https://join.example.com to point to your branded version, you can replace the return 301 path here with your branded folder. We use /provider in our example (assuming you have /home/pexip/branded/provider created as a folder with your branding in it).

    # Redirect from web root to /provider
    location / {
        return 301 /provider;
    }

    It should look like this highlighted line - provider should be replaced with your company name:

     

    If you want to enable smart URLs like https://join.example.com/company/name you will have to add a rewrite.

    If the VMR names have URIs ending with @example.com as alias, and you want someone to connect to name@example.com when going to the link above, you can use the following rewrite:

    rewrite ^/([a-zA-Z0-9-\.]+?)/(?!templates|webapp|configuration|plugins|js|languages|css|img|assets|fonts)([a-zA-Z0-9-\.]+)/?$ /$1/#/?conference=$2@example.com permanent;

     

    Next up, the rules that will make your branded configuraton work, use the arrows to scroll down to the secion called location /api and insert the following (assuming your web root will be /home/pexip/branded) just before locatoin /api:

    # Using a local folder in /home/pexip/branded for the configuration
    location ~ ^/(?!static|api|webapp)(.+)/configuration/(.+)$ {
       alias /home/pexip/branded/$1/$2;
       access_log /var/log/nginx/branded.access.log;
       error_log /var/log/nginx/branded.error.log;
    }

    # Adding a trailing / if using https://domain/cust
    location ~ ^/(?!static|api|webapp)([a-zA-Z0-9]+)$ {
       return 301 /$1/;
       access_log /var/log/nginx/branded.access.log;
       error_log /var/log/nginx/branded.error.log;
    }

    # Redirecting all other files to /webapp on the Px Conference nodes
    location ~ ^/(?!static|api|webapp)(.+)/(.*) {
       rewrite ^/(?:[^/]+)/(.*)$ /webapp/$1 break;
       proxy_pass https://pexip;
       access_log /var/log/nginx/branded.access.log;
       error_log /var/log/nginx/branded.error.log;
    }

     

    It should look something like this with both the redirect from / to /provider, the rewrite for smart URLs and the new location directives highlighted:

     

    Hit Ctrl + X to save, confirm with Y and reload nginx by issuing the following command:

    sudo service nginx reload

    If you have a folder ready, i.e. /home/pexip/branded/acmecorp/ that includes the correct files, you should now be able to go to:

    https://join.example.com/acmecorp and you can see the acmecorp branding in stead of the default Pexip branding.

    The default branding will still be available under https://join.example.com/webapp.

    If you are a service provider and onboarding new customers, you can provide them with their join address https://join.example.com/customername even before you have done the branding, it will show the default Pexip branding until you add the proper branding folder for this customer.

    If you have any questions, feel free to reach out to support at pexip.com via email.

    Was this article helpful?
    1 out of 1 found this helpful

    Comments