Install/Embed Beacon
Beacon can be easily embedded on your webpage by just pasting the code that is provided on your dashboard. In the documentation, you will find video tutorials on how to install beacon window on commonly used channels for creating websites. The main procedure remains the same for all the other channels too, you can contact me if you have some problems in installing the beacon window.
The embed code follows the following structure.
1
<!-- This is the beacon-app element, it supports
2
certain attributes that can be found in SDK. Use it
3
directly in your web page -->
4
<beacon-app key="<BEACON_KEY>"></beacon-app>
5
<!-- This script contains the main magic, use it wherever
6
you decide to add the beacon-app element -->
7
<script src="https://beaconapp.in/b.js"></script>
Copied!
Both
<script> , <beacon-app> tags should be present on the same page for beacon window to work correctly.How to get the embed code?
Follow the following steps to get the Beacon embed code.
- Go the main dashboard overview page (once you are logged in).
- Select a Beacon from the list that you want to embed. This will open the Beacon editor.
- Click on the
Embedbutton, this will open a dialog with the embed code that you can copy. - Additionally, you can modify the Position of the beacon window on your page.
Position
The position of the beacon window can be changed while embedding it on the web page. The
<beacon-app> element has an attribute pos that sets the position of the beacon window on the page.
These are the positions that Beacon currently supports along with how it can be added to the <beacon-app> element:- Bottom left -
pos="left" - Bottom right -
pos="right"
By default, the position is Bottom left.
After adding the
pos attribute, the code looks like1
<beacon-app key="<BEACON_KEY>" pos="right"></beacon-app>
Copied!
Last modified 3yr ago
Copy link