image

How to use Beamer with a Custom Domain

image

Mariano Xerez.

Sep 3, 2024

[hub]

  1. Why use a custom domain?
  2. How to set up a custom domain?
    1. Custom domain basic set up
    2. Custom domain as a sub-folder
    3. Custom domain for push notifications
  3. Need more help?

[/hub]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 desingwise but in naming and address too.[anchor id="why"]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?[anchor id="custom-domain"]How to set up a custom domain?

[anchor id="set-up"]Basic set up [tag type="pro"]

  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.[notice type="info"]If you don't know how to create a CNAME or manage your DNS, please contact your hosting or domain name service.[/notice]

[intercom message="I want to set up a custom domain and I'm already created a CNAME on my DNS provider"]Let us know you're ready![/intercom]

[anchor id="proxy"]Custom domain as a sub-folder [tag type="enterprise"]

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;
    }
  2. Change /updates to whatever path you'd like to use for this.
  3. Let us know! Contact us and we'll set things up on our side. You can contact us by clicking the button below.[notice type="info"]If you have any doubts about how to set this up, please contact us. We'll be glad to guide you in the process.[/notice]

[intercom message="I'm ready to create a custom domain as a sub-folder"]Contact us![/intercom]

[anchor id="push-notifications"]Custom domain for push notifications [tag type="pro"]

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.[notice type="info"]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.[/notice]
  2. 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” />
  3. 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!

[anchor id="help"]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