This article presents the use cases for the Code Design Element that recently became available in the ShortPoint Page Builder. You can use jQuery or copy the embed codes from the other sites to inject HTML, CSS or JavaScript to your page.

In this article, we will give you some useful examples (for more examples continue to our Example Use Cases for ShortPoint Code Design Element: Part 2).

Before we begin

• To learn how to use Code, please check this article: Introducing Code Design Element. 
• The Code Design Element is available since the ShortPoint SPFx version 6.9.35.x. Click here to check and download the latest available version of ShortPoint.

How to use jQuery with Code Design Element

You may use the jQuery with Code Design Element.

Important: Please, note that jQuery will NOT work if the Sandbox mode is enabled.

Step 1: Access jQuery

Copy the string below:

shortpoint.$

Now you can access jQuery.

Step 2: Add your custom JavaScript code

As an example, we will show you how to add a background image to the page header.

Adding a background image to the page header

This is how it will look like on your page:

Copy the JavaScript code:

('[class*=headerRow-]').css({
  'background-image': 'url(https://images.unsplash.com/photo-1514917073844-2f691ae526c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80)',
  'background-position': 'center',
  'background-size': 'cover'});

Click Insert/Update and save the page:

Other use cases

To embed the element from the other sites, you need to get and copy the code (step 1) and paste it to your Code Design Element (step 2).

Using Code Design Element you can add:

• a chat widget:
  
  

• a weather widget:

• a third party video:

• any other element to your page once you get an embed code snippet.

Step 1: Copy the embed code

1.1. Adding a chat widget

You can add chat widgets to your page. Below is an example how to add Freshchat widget. 

Log in to your Freshchat account as Admin. Go to Settings.

Choose Web Messenger.

You will be directed to the Web Messenger settings page under the Getting Started tab. To chat with your website visitors, you will have to embed the widget on your website. Here you may find token and host values for your organization's Freshchat:

Here is the code snippet for anonymous users: 

<!-- Head -->
<script src="https://wchat.freshchat.com/js/widget.js"></script>
<!-- Head -->
<script>
  window.fcWidget.init({
    token: "WEB_CHAT_TOKEN",
    host: "https://wchat.freshchat.com"
  });
</script>

Replace the token and host values with your own. Now the code snippet is ready.

Note: Find out more about adding Freshchat to your website, following this link: Freshchat Developer.

1.2. Adding a weather widget

You can add weather widgets to your page. Below is an example how to add a weather widget from the WeatherWidget.io website. 

Open the website. Select the necessary location you would like to have the weather forecast for: simply type it in the Select location field and choose the relevant location from the drop-down.

Click GET CODE button.

Click COPY TO CLIPBOARD button.

Note: find out more about adding a weather widget from WeatherWidget.io by checking WeatherWidget Video Tutorial.

1.3. Adding a third party video

You can add videos to your page, using Code Design Element. Below is an example how to add a video from Brightcove. 

Open the video on Brightcove that you would like to add to your page.
Open the Players module. Click on the row for the player you want to generate the code for. Don't click on the player name and open the properties page.

Click Embed Code & URL and choose Preview Player or Published Player.

Select the appropriate embed code and click Copy.

Note: Find out more about adding Brightcove videos to your website, following this link: Generating Player Embed Code.

Step 2: Update your Code Design Element with the copied code

1. Go back to your Code Design Element and paste the copied code to the respective code language fields. 

2. You will see the embedded element in the Preview section, or you can as well click Preview button to check how it will look like on your page.

3. Click Insert/Update and save the page.

Example

Here is the example of the page with the Code Design Elements: video and weather and chat widgets:

Now, using ShortPoint Code Design Element on the modern pages it has become possible to achieve the following results, which were only available for the classic pages:

• How to Pause the Tickers element
• How to Automatically Rotate ShortPoint Tabs every few seconds
• How to Automatically Open a Lightbox/Popup When the Page Loads
• Execute JavaScript After ShortPoint Elements Render Event
• How to make the Accordion open a specific item when the page is loaded
• How to Embed Third Party Videos into Your Page

Related articles:

• Introducing ShortPoint Code Design Element
• Example Use Cases for ShortPoint Code Design Element: Part 2