image

How to use Beamer with a Custom Domain

image

Mariano Xerez.

September 21, 2021

    Beamer changelog has two main modes: an embeddable widget that you can easily include inside your app or site, and a standalone page with its own URL. Think of the latter as an independent hub where you Beamer content is displayed as it were a site on its own or even a blogging platform (if you need a live example, you can check Hotjar's Beamer standalone page).

    Beamer standalone page

    As the need for more personalization increases, maybe a separate URL is rowing in the opposite direction. Here at Beamer, we pride ourselves in our customization features so we have kept in mind that out customers may want to make their standalone page their own, not just design wise but in naming and address too.

    Why use a custom domain?

    There are many reasons you may want to have a personalized domain name in your Beamer standalone page, and we won't judge. Here a few usual rationales we hear from our customers:

    • Brand unity. You want to keep all your communications under the umbrella of the same brand. A single URL sends the message of a unified brand and can improve brand awareness and fidelity.
    • Channel cohesion. You want to keep your communication channels cohesive, without your users noticing they are exiting your site to a third-party app. Your changelog is a vital part of your product, so unified URLs keep everything in the family. That means a better user experience!
    • Traffic control and tracking. You want to manage your traffic as a whole, including your Beamer related traffic, with the same URL structure. Taking the traffic through your own URL may be a way to not only measure better but to provide to any third-party a more realistic picture on how many users visit your site.

    Whatever your motive, how can you set your custom domain up? How to set up a custom domain?

    Basic set up  pro and up

    1. Of course you need a personalized domain name first! It you don't have one check with your hosting provider or look for one of the many domain name services that abound all around the web.
    2. Assuming you have your personalized domain net set up correctly you just have to go to your DNS provider. Each hosting or domain name provider has its own methods and platforms and they we'll be able to guide you in the process if you don't have the technical skills required.
    3. Create a CNAME on your DNS provider and point it to custom.getbeamer.com
    4. If you are using Cloudflare please turn the cloud off on that CNAME
    5. Let us know! Contact us and we'll sort the behind the scenes and you'll be ready to go. You can contact us by clicking the button below.
    If you don’t know how to create a CNAME or manage your DNS, please contact your hosting or domain name service.

    Custom domain as a sub-folder  enterprise only

    In order to use a path / 'sub-folder' as the URL to your standalone page - what's necessary for your dev team to set up is a 'proxy-pass'. With this you basically set up your web server to redirect requests from a desired path to your Beamer standalone page.

    1. This is an example of the settings you'd need to add to your NGINX configuration:
    location /updates {
        proxy_pass https://app.getbeamer.com/example$request_uri;
        proxy_ssl_server_name on;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    1. Change /updates to whatever path you'd like to use for this.
    2. Let us know! Contact us and we'll set things up on our side. You can contact us by clicking the button below.
    If you have any doubts about how to set this up, please contact us. We’ll be glad to guide you in the process.

    Custom domain for push notifications  pro and up

    If you have enabled push notifications, your subscribed users will receive them by default coming from push.getbeamer.com. This is necessary for us to make push work for your site with zero configuration (and zero tech work!).

    However, you can still easily set up web push notifications on Beamer to work on your own site (so users will see your domain when they receive a notification). Any web developer or administrator will be able to do this in ~5 minutes.

    1. You will need to upload two small files to the top level root of your site’s directory. These files are manifest.json and beamer-push-sw.js, which you can download right here. Please, do not change the names of these files.
    Note: If you already have a manifest.json file in your directory, simply copy and paste the gcm_sender_id attribute from our file to yours.
    1. If you don’t already have one, add a <link> tag to your site’s HTML <head> section, referencing the manifest.json file you’ve just added. <link rel=”manifest” href=”/manifest.json” />
    2. If everything else is set up on your account, your users should now be able to subscribe and receive web push notifications from your own domain!

    Need more help?

    If you have any doubts about any of the steps described in this article, please contact us. You can chat directly with our support team by clicking on the help button on the bottom right of our app and site. You can also read our Development Documentation and our Help Center.

    Mariano Xerez.

    Lead Designer

    Mariano is a multimedia designer and all-around nerd born in Chile but currently based in Buenos Aires, Argentina. He loves to write CSS, producing videos, playing RPGs, and designing book covers. SaaS marketer based in Vancouver, BC :bandera-ca:. She is passionate about transforming customers into champions and ridding the world of boring product updates.

    This article is about Customer Engagement + customer feedback + Product Management + User Engagement + User Feedback

    blog image

    “Beamer is the perfect tool for SaaS companies to engage users and reduce churn. Beamer has helped us achieve huge improvements in click through rates, reductions in churn and increased upselling.”

    Benny Waelput

    Go-to-Market Marketeer

    logos