Overview
AdvocateAnywhere offers a range of customization options for embedding challenges on your website, allowing for seamless integration within content or specific placement using HTML and JavaScript code snippets. The article provides instructions for inline embedding, displaying specific challenges, and triggering the challenge widget display, ensuring a tailored user experience.
Information
There are several options available to customize how AdvocateAnywhere embeds are displayed on your page.
Embedding Challenges Inline
Embedding a challenge inline will let you embed a challenge within the flow of your website, instead of "floating" on the right hand side of the screen.
Just add the following code wherever you want the embedded challenge to appear. It will fill the width of whatever container you put it in:
<div class="infl-embed"></div>
Displaying Specific Challenges
If you want to display a specific challenge on a page, rather than relying on the URL targeting rules, just add the following code to your page, replacing [1,2,3] with the challenge ids you want to embed:
<div type='text/javascript'>
InfluitiveEmbed.requestChallenges({challenge_ids: [1,2,3]});
</script>
"Popping Open" the AdvocateAnywhere widget
If you want to trigger the display of the embedded challenge "widget" (as if the user had clicked on it themselves), add the following code whenever you want the popup to display:
<script type='text/javascript'>
InfluitiveEmbed.requestChallenges({openWidget: true});
</script>
Note : This only works when popping up form the bottom of the page and not the side of the page which can be configured under Settings > Embeddables > AdvocateAnywhere > Widget Location
Note : This script should be placed after your initial script of <script src="https://<yourhub>.influitive.com/embed.js" data-infl-hub="<yourhub>"></script>
FAQ
How can I embed a challenge directly within the content of my website?
To embed a challenge within your website content, insert the provided HTML code at the desired location on your page. The embedded challenge will adjust to the width of its container.
Is it possible to display specific challenges on my page without using URL targeting rules?
Yes, you can display specific challenges by adding a code snippet to your page and replacing [1,2,3] with the IDs of the challenges you want to embed.
How do I trigger the challenge widget to display as if a user clicked on it?
Insert the provided JavaScript code at the desired point on your page to trigger the challenge widget display. This functionality applies only when the widget pops up from the bottom of the page.
Where can I adjust the location of the embedded challenge widget?
The widget location can be adjusted in the settings under Settings > Embeddables > AdvocateAnywhere > Widget Location.
What should I ensure when placing the script to trigger the challenge widget display?
Make sure that the script to trigger the widget display is placed after the initial Influitive script tag to function correctly.