Skip to content
  • There are no suggestions because the search field is empty.

Displaying Multiple Pike13 Widgets on a Marketing Site

Sometimes it is useful to display multiple widget types on the same marketing page. Learn more about how to accomplish that below.

In This Article

Who can use this feature?

  • Pike13 Plans: ✅Premium, ✅Advanced, ❌Essential
  • User Roles: ✅Primary Owner, ✅Owner, ✅Manager, ❌Staff, ❌Limited Staff

Embedding Multiple Widgets on One Page

By default, every Pike13 widget uses the same unique identifier (id). If you paste multiple widget codes onto a single webpage without modification, they will conflict, and only one (or none) will load correctly.

To display two or more widgets on a single page, you must give each one a unique identifier by editing the code.

  1. Go to Settings > Apps & Add-ons > Widgets in your Pike13 site.
  2. Copy the embed codes for the widgets you wish to use.
  3. Paste them into your website’s HTML editor in the order you want them to appear.
  4. For every widget after the first one, you must add a suffix (such as -2, -3) to two specific locations in the code: the div id and the elementId.
    1. Note: the div id and elementId must match each other exactly.

See example code for a second widget below. Note how -2 is added to div id and elementId.

<script src="https://widgets.pike13.com/widget.js"></script>
<div id="pike13-widget-container-2"></div>

<script>
Pike13Widget({
  elementId: "pike13-widget-container-2",
  type: "schedule",
  useHashRoutes: false,
  subdomain: "YourBusinessSubdomain",
  date: {
    start: 0,
    end: 30,
  },
  style: {
    businessColor: "#008ab4"
  }
});
</script>