Call to Action StreamElements Widget Setup Guide

Our Call to Action StreamElements Widget is here! This short guide will help you get set-up seamlessly.

Still need help? Join our Discord for live support for the GETREKT team!

Please do note that our Call to Action StreamElements Widget is designed in Streamelements custom widget editor. We will look into Streamlabs versions in the future.

CTA Widget Tutorial

A CTA, or "call to action" widget is to direct your viewers attention to an event or important message that is central to your stream at that point in time.

This call to action can be "Follow me on Twitch", "Subscribe to my YouTube" "Join my Discord" - it calls your viewers or subs to complete an action that is desired by you.

In the following paragraphs below, we will show how to get yours set-up for your stream or content. Following on from this will be a guide on how to add extra customisation to your StreamElements widgets in Premier Pro.

Step 1: Add a copy of the CTA Widget to your Streamelements account.

Click on the share link provided to create a copy of the widget onto your account.

Step 2: Edit the CTA Overlay.

Click edit on the newly created overlay.

Step 3: Open Widget Settings

In the editor, look at the left side and click on "Settings".

Step 4: Set Basic Widget Options

Go to Widget Settings: Click on "Widget Settings" in the menu.

Adjust Timings:

Single CTA Duration: Set how long each message shows (e.g., 10 seconds).

Delay Between CTAs: Set how long to wait between messages (e.g., 2 seconds).

Start Delay: Set how long to wait before the first message shows, this acts like a delay between full loop.

Step 5: Style Your Widget

Go to Widget Styling: Click on "Widget Styling" in the menu.

Change Appearance:

Background Color: Set the background color (e.g., white).

Rounded Corners: Make the edges rounded if you want.

Border Color and Width: Set the color and width of the border (e.g., light gray, width: 5).

Change Text Style:

Top Line: Set font and size for the top line (e.g., Inter, size: 20).

Middle Line: Set font and size for the middle line (e.g., Inter, size: 40, color: black).

Bottom Line: Set font and size for the bottom line (e.g., Inter, size: 18, color: gray).

Step 6: Add Social Media CTAs

Add CTAs for Different Platforms: Click on the platform names like Twitch, YouTube, or Instagram to add messages for each one.

Customize Each CTA:

For Twitch: Turn on Twitch, upload your profile picture, pick a color, and write your message and handle.

Do the Same for Other Platforms: Repeat the process for YouTube, Instagram, and other platforms you want to add. Each platform has a hard-coded icon attached to it. If you want one without, we’ve provided a custom CTA option in the list.

Step 7: Finish and Save

Check Your Widget:

Look at the preview to make sure everything looks good.

Save Your Changes:

Click "Save" to keep your settings.

Following on from this initial guide, the rest of the guide will show how to customise .mgrt files in Premiere Pro to add dynamic elements to your video projects. This is an additional customisable option for the StreamElements widgets!

For now - You've now created and customized a widget on StreamElements! This will help you show important messages to your viewers. If you need to make any changes, you can always come back and adjust the settings.

If you have any questions, feel free to ask in our Discord for help!

Customisation in Premiere pro

Editing .mogrt files

Step 1: Download .mgrt Files

Start by downloading your files from the GETREKT Elements store. Extract the Zip file to a convenient location as you’ll need to import the .mogrt file shortly!

Step 2: Open Premiere Pro

Launch Adobe Premiere Pro on your computer. Make sure you have the latest version installed for compatibility with .mgrt files.

Step 3: Create a New Project or Open an Existing One

If you're starting a new project, click on "New Project" and set up your project settings. If you have an existing project, open it from the Recent Projects list.

Step 4: Access the Essential Graphics Panel

Go to the "Window" menu and select "Essential Graphics" to open the Essential Graphics panel.

Step 5: Import .mogrt Files

In the Essential Graphics panel, click on the "Install Motion Graphics Template" button (this looks like a square with a plus symbol and is located in the bottom right corner of the panel).

Navigate to the location where you saved your .mogrt files and select the ones you want to import.

Click "Open" to import the .mogrt files into Premiere Pro.

Step 6: Drag .mgrt Files to Timeline

Locate the .mgrt files you imported in the Essential Graphics panel.

Drag the desired .mgrt file from the Essential Graphics panel onto the timeline in the sequence where you want it to appear.

Step 7: Customize .mgrt Elements

With the .mgrt file selected on the timeline, switch back to the Essential Graphics panel.

Here, you'll find various parameters and controls to customize the appearance and behavior of the .mgrt file.

Depending on the complexity of the .mgrt file, you may be able to adjust text, colors, animations, and other properties directly from this panel.

Step 8: Preview and Adjust

Play through your timeline to preview how the .mgrt file

interacts with your video footage. Make any necessary adjustments to the customization options in the Essential Graphics panel to fine-tune the appearance and timing of the .mgrt file.

Step 9: Export or Continue Editing:

Once you're satisfied with the customization of the .mgrt file, you can proceed to export your project as usual or continue editing additional elements.

Step 10: Save Your Project:

Don't forget to save your project to preserve all the changes you've made.

That's it! By following these steps, you can successfully import and customize .mgrt files in Adobe Premiere Pro to enhance your video projects with dynamic motion graphic elements.

We hope this guide has been helpful in creating StreamElements Widgets to fit your stream! If you need any assistance, please head to our Discord to contact the team and get live support.

Resources

View All

GETREKT Labs and GETREKT Elements create custom and pre-made stream overlays for YouTube, Facebook, Twitch, Kick, Tiktok and all major streaming platforms, for use with StreamElements, StreamLabs and OBS.

GETREKT Labs features custom stream overlays, animated Twitch overlays, interactive stream assets, 3D world building, Unreal Engine 5 environments, custom widgets, stream overlays for OBS, camera overlays, reactive overlays, emotes, alerts, sound effects (sfx), set-up, coding and more for all items. Set-up includes all platforms and integration with StreamLabs, Stream Elements and OBS.

GETREKT Elements features pre-made stream overlays and assets, including animated Twitch stream overlays, camera overlays, stream layouts, emotes, alerts, sfx, Twitch panels, scene transitions, stingers, OBS overlays and more – all with an easy 1 click set up in StreamLabs and StreamElements with OBS.

Looking for your Wishlist?

You must have an account and be signed in to access your wishlist

Don't worry you can continue shopping without creating an account, but you won't be able to save items to your wishlist