JavaScript Injectors

Overview

The JavaScript Injector is a powerful feature that allows you to dynamically inject custom JavaScript code into your Screenly presentations. This opens up a vast array of possibilities for creating interactive and dynamic displays.

Capabilities

• Interact with the Screenly API: Access Screenly’s API through the injector to interact with and manipulate various aspects of your presentation, such as content playback, screen transitions, and more.
• Customize Player Behavior: Implement custom logic to trigger specific actions based on events or user interactions, creating a unique user experience tailored to your needs.
• Enhance Display Functionality: Add new functionality to your Screenly displays, such as real-time data visualization, interactive maps, or custom widgets.

Implementation

The JavaScript Injector is implemented as a browser extension, allowing for efficient and secure execution of custom JavaScript code within the Screenly player environment.

Options

1. Global Script

This option allows you to inject a single JavaScript file that will be executed globally across all your presentations.

Example:

// injector.js
          console.log("This script is executed globally in all presentations");
          

Source: examples/injectors/global.js

2. Presentation Specific Script

This option enables you to inject a custom JavaScript file for a specific presentation. This script will only be executed during the playback of that particular presentation.

Example:

// injector.js
          console.log("This script is only executed for this presentation");
          

Source: examples/injectors/presentation.js

3. Inline Script

This option allows you to directly write JavaScript code within the Screenly presentation editor.

Example:

// inline script
          console.log("This is an inline script");
          

Source: examples/injectors/inline.js

4. API Interaction

The JavaScript Injector allows you to interact with the Screenly API, enabling dynamic control over various aspects of the presentation.

Example:

// injector.js
          // Get the currently playing presentation
          Screenly.presentation.getCurrentPresentation()
              .then(presentation => {
                  console.log(`Currently playing presentation: ${presentation.title}`);
              });
          

Source: examples/injectors/api.js

5. Custom Widgets

You can build custom widgets that interact with the Screenly presentation environment. These widgets can be used for data visualization, interactive elements, and more.

Example:

// custom widget script
          class MyWidget extends HTMLElement {
              connectedCallback() {
                  this.innerHTML = `
                      <div>Hello from a custom widget!</div>
                  `;
              }
          }
          
          customElements.define('my-widget', MyWidget);
          

Source: examples/injectors/widgets/widget.js

Best Practices

• Security: Be cautious with code from external sources and avoid executing untrusted JavaScript.
• Performance: Optimize your scripts for efficient execution to avoid impacting performance.
• Documentation: Provide clear and concise documentation for your scripts to ensure maintainability.

Note: The examples provided are for illustrative purposes and may require further adaptation based on your specific needs and requirements.