Getting started with AdvocateAnywhere
For a high level intro, check out this article first.
Getting AdvocateAnywhere integrated into your site is straightforward, but you will need to make some changes to the HTML code of any webpages you want to embed challenges in. This guide will walk you through setting the look and feel of AdvocateAnywhere, integrating the AdvocateAnywhere HTML code, and embedding your first challenge.
1. Personalize your AdvocateAnywhere
You can configure your AdvocateAnywhere look and feel from Settings -> Advocate Program -> AdvocateAnywhere. There are 3 options you can set up for customizing your embedded challenges:
- Tab Size & Logo - The tab logo will be used to indicate to advocates that there's an embedded challenge available to them. It should be a square image, and will be automatically resized to the correct dimensions for you.
- Color Scheme - Choose the color you want to use for your embedded challenges. You can use the color scheme you use for your hub, or enter a hex color code if you want precise control over your color scheme.
- Messaging - The "Thank-You" message is what is shown to advocates after they have completed all the challenges available to them.
2. Integrate the AdvocateAnywhere code
Paste the following code on any page where you want to enable AdvocateAnywhere. Nothing will be shown on these pages until you select which challenges you wish to embed from your Challenge list. You can place this code anywhere on your site, but we recommend placing it before your closing
</body> tag to keep your pages loading quickly.
<script src="https://YOURHUB.influitive.com/embed.js" data-infl-hub="YOURHUB"></script>
We recommend adding this code to as many pages as possible (generally through a shared theme or template file that is included in all pages on your site), so that if you want to embed challenges on more pages on your site, you don't need to go through this step again.
If you have information about the people visiting your site (through login to an application, or other analytics tracking you might be using), sharing this information with AdvocateAnywhere will make the advocate experience better. Read our guide on identifying advocates and include this code.
3. Embed a Challenge
Once AdvocateAnywhere is set up, embedding challenges is easy! Just the use the AdvocateAnywhere Challenge Creator to create challenges, publishing them like a regular challenge
To embed challenges on a particular site, specify a URL to embed your challenges under Embed on my webpages that match the URL(s) listed below: and click Add. Once this is done, anyone visiting your site will see the embedded challenge callout, and will be able to complete challenges. This can be used to target different parts of your app or website with different challenges depending on the content!