This walkthrough will guide you in embedding your Revisual calendar or event alert widget on your WordPress website.
Sometimes, new embeds do not show up in on builder pages until published. We suggest using a test page or private mode to set things up. Once things are set as you want them, you can update the actual page or make your private page public.
Part I: Make sure you have a widget to embed
You will need a Revisual widget (Calendar or Event Alert). If you have not already created one, please do that before continuing this process.
Part II: Make sure you have a website to display it on
Did you tell Revisual about your websites? If not, please do that now.
Part III: Embed your widget
1. Log in to Revisual.
2. Open the Widgets section if not already opened.
3. Choose the widget category required: Calendars or Event Alerts.
4. Inside your chosen category, open the item you wish to work with.
5. Make sure you are in the Install tab.
FOR CALENDARS
First...
Option 1: Toggle on the Make this widget available to others button.
OR
Option 2: Click on the blue Publish button.
Second, click on the blue Install button.
Now, choose the WordPress option.
Click the blue Next button. The screen will refresh and look like this (image below). Note items 1 and 2. We will use them soon.
FOR EVENT ALERTS
First, toggle on the Make this widget available to others button
Second, click on the blue Install button.
Now, choose the WordPress option.
Click the blue Next button. The screen will refresh and look like this (image below). Note the snippet. We will use it soon.
Continue with Step 6 below.
Step 6: Plugin and Head section
CALENDAR WIDGETS:
This is a one-time deal for your first calendar. You do this step and then Step 7 below.
To embed further calendars on the same website, do not do this step again. Jump to Step 7 below.
EVENT ALERTS: Do this step for each event alert you wish to embed. Do not do Step 7.
SELECTING A PLUGIN
While you can edit the WordPress theme yourself, we recommend using one of the existing plugins that do it for you. If your website is advanced, you most likely have such a plugin installed already. If you do, jump to Head install. If not, here are your next steps.
Click on Plugins.
Click on Add New.
The Plugins page will open.
Click on Add New.
The Add Plugins page will open.
Type the keyword 'header script' into the Search bar.
The page will refresh to selections based on your keyword.
We will choose the first one. This is a random choice. We do not recommend this particular plugin. We only choose it because it's first on the list.
Click on the Install Now button.
Click on the Activate button.
Head Install
1: Navigate back to your Plugins page.
Find the relevant plugin. In our case, it is the one we just added (turquoise arrow in image below).
2: Click on Code Snippets (gold box in image to the left). Depending on your plugin, the name may be different.
3: Click on the blue Add New button.
Please remember: Your page may look different due to the plugin you are using.
The Add Snippet page will open.
4: Find the relevant type. In our case, it is adding a custom code. Click on the blue Use snippet button (or whatever is relevant for your plugin).
5: Navigate back to Revisual. Copy the snippet from #1.
6: Navigate back to WP and paste the copied code into the relevant space.
Here is an example of what it might look like.
7: Make sure the code type is an HTML Snippet.
8: Make sure that the status is active.
9: Give a meaningful title to this snippet to remind you what it is for.
10: Save your snippet.
Step 7: Calendar Widget Embed
This section embeds your calendar widget on your Wordpress website. Repeat for each widget you wish to embed.
1. In Revisual, copy the HTML5 object from #2.
2: Navigate to your WordPress admin panel. Select the page on which you wish to embed your calendar, groups widget, event alert, or sign-in forms widget. We chose Events
The page will refresh to your website page.
3: Choose Custom HTML from the block options.
4: Paste the copied HTML5 object into the relevant line.
5: Click on Preview to make sure everything is working well.
6: Update the page to save your action.
NOTE: If the preview shows that the widget IS NOT displaying, contact us for support via our website chat.