Rush Soccer Club (Example)
Embedding Trace widgets on your site.
1. Add the script
Add the following javascript anywhere on your web page
<script src="https://37.traceup.com/embedding/traceWidgetLoader.js"></script>
<script>
window.addEventListener('load', function () {
widget_options('your_div_id', 'your_private_code');
});
</script>
2. Customizing your widget
widget_options = This controls the type of widget you are trying to embed. You have 3 widget types to choose from:
- tracebotEmbedGroupPage = map + goals + team search
- tracebotEmbedUsMapPage = map only
- tracebotEmbedMomentsPage = latest goals only
your_div_id = The div id string of the element on your webpage where you will like to embed the widget.
your_private_code = The code Trace will give you to activate your widget.
Note: If you’re embedding video on your club’s website, you can also choose to display only your home team’s goals (versus displaying all goals in a game). You simply need to add the {homeGoals: true} parameter along with an additional parameter for ‘group’ or ‘tournament.’ Here’s how that could would look:
<script src="https://37.traceup.com/embedding/traceWidgetLoader.js">
</script>
<script>
window.addEventListener('load', function () {
widget_option('widget_option', 'your_private_code', 'group', {homeGoals: true});
});
</script>
<div id="widget_option"></div>
3. Example
In the example below we are embedding the map-only widget on this page.
<script src="https://37.traceup.com/embedding/traceWidgetLoader.js"></script>
<script>
window.addEventListener('load', function () {
tracebotEmbedUsMapPage('takeoutMap', 'vi43o09ne0d');
});
</script>