One client gave us the challenge of embedding Digital Academy into FreshDesk articles!

We ❤️ a good challenge! Game on.

The crux of this workaround is caused by two factors:

FreshDesk rewrites the $ operator yet still loads jQuery; creating strange and uncustomary errors.
FreshDesk didn't support embedding Javascript directly into articles; instead, they only support it in the theme template that governs them.

So! That's where we'll perform these changes: within the Portal Customization section, under the Solutions > Article View component.

Head there, and let's get started.

Building an article map

The first step is to develop the article map. Once we're done with all this work, this is the only bit you'll need to maintain as you add Digital Academy demos to your various articles.

A map says, "Hey, if it's article ID 4253424343, then we need to show Digital Academy demo 'aba21cf6-4777-4553-b116-dbe4e453ab38' (and so on).

At the very top of your article template code, add this tidbit:

{% case article.id %}
   {% when 150000028124 %}
      {% assign llxpDemoId = 'aba21cf6-4777-4553-b116-dbe4e453ab38' %}
   {% else %}
      {% assign llxpDemoId = false %}
{% endcase %}

The anatomy of this script has two parts:

The article ID on the FreshDesk side (you have to infer this from the URL when you view the actual article): 150000028124
The LLXP demo ID which you get from the embed script instructions in the administrative area: 'aba21cf6-4777-4553-b116-dbe4e453ab38'

You will "grow" this case statement as you add more articles. For example:

{% case article.id %}
   {% when 150000028124 %}
      {% assign llxpDemoId = 'aba21cf6-4777-4553-b116-dbe4e453ab38' %}
   {% when 150000028125 %}
      {% assign llxpDemoId = 'f23jfjd9-3525-5234-d535-fn3947fb302b' %}
   {% else %}
      {% assign llxpDemoId = false %}
{% endcase %}

The above instructs the template to understand:

"If the article ID is 150000028124, show demo aba21cf6-4777-4553-b116-dbe4e453ab38"

otherwise

"If the article ID is 150000028125, show demo f23jfjd9-3525-5234-d535-fn3947fb302b"

Adding the Player Div

The player div is the target into which LemonadeLXP will paint the Digital Academy Demo view. You need to position this near the default {{ article.body }} tag that FreshDesk provides. Here's what that section looked like on their default template, with the necessary addition:

<section class="container-fluid pt-32 pb-60">
    <div class="container fw-wrapper-shadow px-0 bg-light">
      {{page_message}}
      <div class="row mx-0 g-0">
        <div class="col-lg-9 fw-content-wrapper mb-16 mb-lg-0">
          <div class="fw-content fw-content--single-article line-numbers">
            {{ article.body }}
            
            {% if llxpDemoId %}
            <div id="player" style="width:100%;height:720px;background-color:#FAFAFA;"></div>
            {% endif %}
            
            {{ article | attachments }}
          </div>
          {{ article | solution_article_feedback }}
        </div>

...

Within this snippet, here's the bit that we added:

{% if llxpDemoId %}
    <div id="player" style="width:100%;height:720px;background-color:#FAFAFA;"></div>
{% endif %}

This says, "if there's a demo scheduled to be shown, then print this player div". The concept of demo scheduled to be shown is established by the map that we built.

Adding the Executable Javascript Embed (and a bit of styling)

Last bit of homework, add this script at the very end of this template (just cut and paste, as-is):

<style>
  #demo-info {
     display: none !important; 
  }
  
  #demo-controls {
     z-index: 2 !important; 
  }
  
  #screen-list-container {
     display: none !important; 
  }
</style>
{% if llxpDemoId %}
<script>
  function onReady(callback) {
    if (document.readyState !== "loading") {
      callback();
      return;
    }

    window.addEventListener("load", () => {
      callback();
    });
  }

  onReady(() => {
    $ = jQuery;

    $.getScript( "https://LEMONADELXPDOMAIN/external_stepdemo_player_nojquery.js", () => {
        Lemonade.DemoPlayer.play({
            demo: '{{ llxpDemoId }}',
            container: $('#player'),
            locale: 'en_US',
            disableAutoScroll: false,
            finishButtonText: 'Try Again',
            horizontalPadding: 25,
            onFinish: function (playerInstance) {
                playerInstance.restart();
            },
            onStepChange: function (previousStep, currentStep, currentHotspot, totalSteps) {
                // every time the scene changes, this event is called
            },
        });
    });
  });
</script>
{% endif %}

After you paste it, find the word LEMONADELXPDOMAIN within it, and replace that with the domain (and subdomain most likely) that points to your LemonadeLXP instance.

...Nerdy Details

This last snippet, overwrites $ with the standard jQuery object to reestablish "typical" operation. FreshDesk overwrites the otherwise ubiquitous $, which is what breaks everything. Within a custom onReady wrapper, it executes the embed dead last (after all scripts have loaded).

That's all there is to it! (Ok, it's a lot!).

Click Save and then click Publish.

Assuming that the template you have edited is the one that is applied to the portal that contains the article you are targeting, LemonadeLXP will print a demo in the view.