Simple branding in your web client

The web client template is intended to get you started developing quickly, but naturally you'll want it to fit seamlessly into your existing site.

The PureWeb images in the web client template can be easily removed or replaced.

Logo Replacement

The easiest step is replace the pureweb.svg image in the web client with an image of your choice. In Launch.tsx find the line that looks like this:

<img alt="PureWeb Logo" src="/pureweb.svg" style={{ width: 100, position: 'absolute', bottom: 50, right: 10 }} />

By replacing pureweb.svg with the name of your own logo file you are one easy step closer to a fully branded web client.

Note: Make sure you place your image in the correct folder, and don't forget to change the alt tag above as well!

Loading Graphic Replacement

The animated image that displays while the stream is loading is defined in App.tsx, around line 119.  You can replace it with an animation, slides or even videos of your own.

content = (
      <div>
        <!-- YOUR CHANGES GO HERE -->
        <h3>Please wait, your session is loading.</h3>
      </div>
    );

Of course you can update the fonts, colours, icons and much more as you continue to customize your web client to best suit your streaming experience!

Favorites Icon Replacement

The favicon, or website icon – is an icon that appears in the page tab and address bar of your browser when a particular site is displayed. In the web client template, this is stored as a file named favicon.ico in the public folder. Simply overwrite this file with your own icon and you're all set.

Alternatively, if you want to put in an icon file with a different name, you'll also need to change the index.html to match.

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />