Skip to main content

Embed UE Advocacy in your community

Put your advocacy hub right inside your community. Members do missions and earn rewards without leaving. It takes about 5 minutes, and you don't need a developer.

T
Written by Tom Aristone

Before you start

You need two things. Get them once, then follow the steps for your platform.

  1. Your Brand ID

    1. In UE Advocacy, go to Settings > Integrations.

    2. Find the Gainsight CC card. You don't need to use Gainsight.

    3. Under Query parameters, your Brand ID is the number next to brandID.
      ​

  2. Your embed code

    1. Copy this code. Change YOUR_BRAND_ID to your Brand ID. You'll paste it into your platform.
      ​
      ​

      <iframe
        src="https://community.joinzealot.com/embed/overview?brandID=YOUR_BRAND_ID"
        title="Advocacy hub"
        width="100%"
        height="1400"
        style="border:0;">
      </iframe>


      This same code works on every platform below.
      ​

Gainsight

  1. Go to the page where you want the hub.

  2. Click Edit layout.

  3. Click +, then HTML Widget.

  4. Paste your embed code.

  5. Click Done, then Publish.
    ​

Higher Logic Vanilla

  1. Go to Dashboard > Settings > Security.

  2. Under Content Security Domains, add community.joinzealot.com. Save.

  3. Go to Dashboard > Appearance > Layouts. Open the layout for your page.

  4. Add an HTML widget.

  5. Paste your embed code into the widget's HTML tab.

  6. Save and publish.
    ​


Higher Logic Thrive

You need a Super Admin for step 1.

  1. Go to Admin > Settings > Security > Content Security Policy. Add https://community.joinzealot.com. Save.

  2. Go to the page where you want the hub. On the Admin Toolbar, click Edit Page.

  3. On the Build tab, drag an HTML content item onto the page.

  4. Paste your embed code.

  5. Save the page.

Adding it to a community home page? Use the Community-specific HTML widget instead.

Bettermode

  1. Go to the space where you want the hub.

  2. Press C on your keyboard. This opens the Design Studio.

  3. Hover over a section. Open its menu and click Add block.

  4. Pick HTML script.

  5. Paste your embed code.

  6. Save and publish.

Mighty Networks

  1. Create or open an Article.

  2. In the body, click +, then Embed.

  3. Paste your embed code.

  4. Publish.

Discourse

  1. Go to Admin > Settings. Search for allowed iframes.

  2. Add https://community.joinzealot.com/ (keep the / at the end). Save.

  3. Create a topic, or edit one.

  4. Paste your embed code into the post.

  5. Save.

Any other platform

Use these steps for Khoros, Circle, Salesforce Experience Cloud or any other platform.

  1. Find where your platform lets you add HTML, a custom code block, or an embed.

  2. Paste your embed code.

  3. If you see an empty box, your platform is blocking outside content. Add community.joinzealot.com to its list of allowed sites. Your platform's help center will have it under security or content settings.

Stuck? Send us your platform's name and we'll help.

Check it

  1. Open the page as a member would.

  2. You should see your missions and rewards.

  3. Click a mission. You'll get an email with a code to sign in.

That's what your members will see too. After they enter the code, their missions, points and rewards show up.


Can members be signed in automatically?

Your platform

How members sign in

Gainsight

Automatic sign-in may be available. Ask your UE Advocacy contact before you set it up.

Every other platform

Members sign in with an email code. It works everywhere, with no setup.

The email code is safe. Members only see their own missions, points and rewards.


​

Choose what to show (optional)

By default, the hub shows missions and rewards.

Show just one thing

In your embed code, change overview to one of these:

To do this

Add this

Add the leaderboard

&leaderboard=true

Add levels and points

&levels=true

Hide missions

&missions=false

Hide rewards

&rewards=false

Show nothing until a member signs in

&onPublic=hide

For example, rewards and leaderboard, no missions:

src="https://community.joinzealot.com/embed/overview?brandID=YOUR_BRAND_ID&missions=false&leaderboard=true"


Change the look (optional)

Card size

Add one of these to the end of the link. Medium is the default.

Size

Add this

Mission card

Reward card

Small

&cardSize=small

300 × 280 px

240 × 330 px

Medium

nothing

365 × 335 px

280 × 370 px

Large

&cardSize=large

430 × 390 px

320 × 410 px


Size of the whole embed

Change the numbers in your embed code:

  • width="100%" fills the space. Use a number like width="800" for a fixed width.

  • height="1400" sets how tall it is. Make it bigger if the hub is cut off, or smaller to save space.
    ​

Colors and logo

The embed uses your brand's look automatically.

  1. In UE Advocacy, go to Settings > Customize.

  2. Under Brand Colors, set your Primary Color. Buttons and highlights use it.

  3. Under Brand Identity, upload your Brand Icon.

  4. Save. The embed updates on its own. You don't need new code.

Mission and reward images

Each mission and reward shows its own image. For the best fit, see Image Sizes & Design Guidelines for Your Community Hub.

Something wrong?

You see

Do this

An empty box

Your platform is blocking outside content. Add community.joinzealot.com to its allowed sites.

The hub is cut off

Make the height number bigger, like 1800.

Members can't see their points

They need to sign in. They'll get a code when they click a mission.

Still stuck? Email your UE Advocacy contact and we'll set it up with you.

Related Articles
Did this answer your question?