Overview:

Morphique is an AI-based activation that generates creative images from pictures you take. It uses AI models to generate images of the captured person in different settings, depending on the chosen settings and prompts.

Settings

Public name: This is the public-facing name for the activation.

Cover Image: This is the cover image of the activation as displayed on the Captello mobile device.

Play Restrictions: Here you can set the restrictions on gameplay. There are two options available:

Event Group: The user can play this many games across all activations associated with the Event. This total applies to any activation that has the Event Group setting enabled.

Individual: Limits the number of times this activation can be played. Empty or 0 is unlimited.

Title: The main title that will appear at the top of the screen.

Subtitle: the subtitle that will appear below the main title.

Capture time: Specify the delay between clicking 'Capture' and when the photo is taken.

Timer Help Text: The text that appears before the timer while the camera capture

Default Camera: select the default camera to be used in the activation.

Allow Camera Switching: the option for switching between cameras.

Number of images to generate: The number of images that will be generated.

Generated Image #1 Field: Map the custom field of generated image 1

Generated Image #2 Field: Map the custom field of generated image 2

Height of the generated Image: Specify the height of the generated image. The value must be divisible by 8, with a minimum of 512 pixels and a maximum of 768 pixels.

Width of the generated Image: Specify the width of the generated image. The value must be divisible by 8, with a minimum of 512 pixels and a maximum of 768 pixels.

Models

Choose the AI Models for the Activation by clicking on the plus Icon and choose the model from the select-model dropdown:

Once you select the model, the images and model names will populate with their information. You can edit the model images and names as you wish.

Branding (Frames and Logos): Upload your brand logo or a frame to be added to the generated images

Position: Choose from the drop-down where the logo will appear.
Horizontal spacing and Vertical spacing: Adjust the spacing to set the margins relative to the selected position (e.g., left margin for left positions).
Opacity: set the 'Opacity' (0-100) to control the transparency of the logo.

Note that if only 'top' or 'bottom' is selected, "Vertical Spacing' won't apply, and if only 'left' or 'right' is selected, 'Horizontal Spacing' won't apply. Be mindful of the width of your logo or frame, ensuring it is not too large for the output image to avoid being cut off.

Allow Pick From Gallery: Enable or disable the option for the players to upload a photo from the gallery.

Models Grid Title: Enter the title that appears above the model

selection grid.

Start Button Text: Enter the text displayed on the start button.

Done Capture Button Text: Enter the text displayed on the button when photo

capture is complete.

Add Photo Button Text: Enter the text displayed on the button to add a photo.

Change Photo Button Text: Enter the text displayed on the button to change the photo.

Finish Button Text: Enter the text displayed on the button to finish the activation.

Pick a Photo Title: Enter the title that appears at the top of the photo selection popup.

Open Camera Button Text: Enter the text displayed on the button to open the camera.

Open Gallery Button Text: Enter the text displayed on the button to open the gallery.

Active Status

Active Status is a way to enable or disable your activation. Settings are described below:

Forever: Makes the activation accessible at all times.
Date Range: Makes the activation accessible from the Start Date and End Date defined. If a player attempts to play an activation after the End Date then they will receive a message or get redirected to another URL as defined.
Inherit from Event: Uses the Start Date and End Date of the Event Form. If a player attempts to play an activation after the End Date of the Event then they will receive a message or get redirected to another URL as defined.
Inactive: Makes the activation inactive. If a player attempts to play an activation while it is inactive then they will receive a message or get redirected to another URL as defined.

Style

Submit Button Background Color: Changes the background color of the button on the lead capture screen.

Submit Button Text Color: Changes the color of the text on the button shown on the lead capture screen.

Submit Button Text: Text shown on the button at the bottom of the lead capture screen.

Play Button Height: Changes the height of the play button when used in a browser or in the mobile app.

Favicon: Icon shown above beside the activation URL.

Loading Image: The image appears while the activation is loading. The image will appear on top of the loading bar. Recommended image size to be lower than 2MB.

Logo: The logo will scale to 80 pixels in height on activations without prizes and 150 pixels in height for activations with prizes. Recommended image dimensions: 340 pixels (width) x 79 pixels (height).

Logo Size (Desktop): Specifies the size of the logo in a desktop environment.

Logo Size (Mobile): Specifies the size of the logo in a mobile environment

Logo Position Horizontal:

Left: Position the logo image horizontally (x-axis) on the left side within the Activation/Game.
Middle: Position the logo image horizontally (x-axis) in the middle within the Activation/Game.
Right: Position the logo image horizontally (x-axis) on the right within the Activation/Game.

Logo Position Vertical:

Top: Position the logo image vertically (y-axis) on the top within the Activation/Game.
Middle: Position the logo image vertically (y-axis) in the middle within the Activation/Game.
Bottom: Position the logo image vertically (y-axis) on the bottom within the Activation/Game.

Use Logo Background Color: Toggle this option to enable or disable the background color behind your logo.

Logo Background Color: Select the color to use as the background behind your logo when the background is enabled.

Logo Background Rounding: Rounds the edges of the background behind the logo image. Adjust the value to control how rounded the corners appear.

Use Logo Outline Color: Enable this option to apply an outline around your logo. Customize the outline color below.

Logo Border Thickness: Thickness (pixels) of the logo image border/outline.

Logo Inner Padding: Set the padding inside the logo's background to adjust the space between the logo and its background edges.

Logo Outer Margin: Control the margin outside the logo's background to adjust the space between the logo and surrounding elements.

Font Family: Choose the font family for all text in the activation.

Background Image Mode: Background Image will be applied for all devices [Mobile, Tablet & Desktop].

Background Image: The image is shown in the background of the activation. Use a background image that works with your selected background mode.

Note: Do not use low-resolution images when using the background mode as stretch or cover. Do not use a high-resolution image when using your background mode as a repeat. When using cover or stretch modes make sure to test your background on different screen sizes. When using a background image remove the background color to avoid any conflict.

Background Fit:

Stretch: Stretches the aspect ratio of the image until it fills the background.
Cover: Preserves the aspect ratio and will cut off the sides of the image until the image fills the

background.

Repeat: Repeat the background image.
Contains: Uses the aspect ratio of the background image but may expose empty space on the sides, showing the background color.

Background Color: Background color is shown in the background of the activation. Note, if a Background Image is added then the image will override the color.

Border Image: Image used as a border around the Activation/Game. See documentation for details

on how to use the border feature.

Border Slice Width (Pixels): Border settings.

Back Button Color: The color of the back button that exits the activation. This button is typically used by an administrator.

Loading Bar Background Color: The background color of the loading bar.

Loading Bar Border Color: The background color of the loading bar border.

Buttons Color: Set the color for the main buttons in the activation.

Secondary Buttons Color: Set the color for the secondary buttons in the activation.

Title Color: Choose the color of the activation title.

Sub Title Color: Choose the color of the activation subtitle.

Models Grid Title Color: Enter the color of the title that appears above the model selection grid.

Models Names Color: Enter the color of the title that appears at the bottom of each model.

Screensaver: Lets you turn on a screen saver for the activation when it’s being used inside the capture app.

You can send the images generated through an email using Imaged generated action:

Setting up the morphine email

First, create custom fields for the images generated:

Navigate to Setup > App Setup > Manage Fields.

Create a new text custom field for each image and then Click “save’.

Note: Copy the identifier for the created custom fields as they will be added later to the email associated with the images.

Second, navigate to Content > Email.

Add a section for the image to be inserted later when sending the email.

Add the following code to the section intended for the first image and replace the identifier in the code with the identifier of the custom field intended for the first image on line 13 “%%Morphique_Custom_Image_1__c%%"

							<table class="ebTextBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
								<tbody class="ebTextBlockOuter">
									<tr>
										<td class="ebTextBlockInner" valign="top">
											<table class="ebTextContentContainer" align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
												<tbody>
													<tr>
</tr></tbody></table><table style="min-width: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%" class="ebTextBlock"><tbody class="ebTextBlockOuter"><tr><td valign="top" class="ebTextBlockInner"><table style="min-width: 100%;" align="left" border="0" cellpadding="0" cellspacing="0" width="100%" class="ebTextContentContainer"><tbody><tr><td valign="top" class="ebTextContent" style="border: 0;padding-left:18px; padding-right: 18px; padding-top: 18px; padding-bottom: 18px;">




<div style="text-align: center;"><img src="%%Morphique_Custom_Image_1__c%%"></div>

</td></tr></tbody></table></td></tr></tbody></table>
						</td></tr></tbody></table>

Click on the ‘Code’ icon, clear the existing code, paste the new code in this section, and then click ‘Save and Close’

Repeat the same steps for the second image and replace the identifier in the code with the identifier of the custom field intended for the second image. “%%Morphique_Custom_Image_2__c%%”