Create Embedded Cards Campaign
Step 1: Select Embedded Cards and Click on Create New
On the Left Navigation of the Apxor Dashboard, Click on Embedded Cards.
After landing on the Embedded Cards campaigns listing page, click + Create New in the top right corner.
If you want to edit an already existing campaign, click on the three dots for the respective campaign under the Actions column on the rightmost.
Step 2: Select Template
Click on + Add First Step.
Select the Template from Apxor Templates or Saved Templates.
Step 3: Capture the Screen with Embedded Cards slot
After selecting the embedded card template, click Select Screen under the Design Config section on the right side of the Apxor dashboard.
Scan the QR Code using a mobile device that has your app installed on it.
Click to open the link that appears on your mobile device.
If your mobile device has not already been added as a Test Device, you'll be prompted to enter a name and add it as a Test Device. If your device has already been added, confirm the name by clicking on Okay. You'll then be redirected to the home screen of your app on the mobile device. In rare cases, if you are unable to see the Apxor Widget (a white circular icon with the Apxor logo) at the top of your mobile device, please close the app and scan again.
Navigate to the desired screen where you want to launch the Embedded Cards campaign. Click on the Apxor Widget at the top, then click on "Show Embed Slots" to see all the available Embedded Cards slots on the current screen.
Once you see all the available Embedded Card Slots on the screen of your mobile device, click on the Apxor Widget, then click "Select this screen" to capture and cast the screen to the dashboard.
Step 4: Select the required Embedded Card Slot
Once the screen is cast onto the dashboard, select the embedded card slot where you want to launch the campaign. You can hover over and click on the available slots from the cast mobile device on the dashboard; alternatively, you can also select from the list of slots present in the table on the left of your cast screen on the dashboard. Click "Proceed to Select".
If you want to edit the selected screen or an embedded slot/UI element, click on the pencil icon beside the Screen or UI Element name under the Design Config on the right side of the Apxor Dashboard.
Step 5: Design the Embedded Cards
Use the design config section at the right side of the dashboard for each of the elements in your embedded card template. Select the respective element from the left side of the dashboard or hover over it and click on the element in the simulator at the center.
Embedded Card Container
Hover and select the embedded card from the simulator or click on the Embedded Card text in the hierarchy view on the left of the dashboard to customize the embedded card container.
App Screen
Screen: Edit the already selected screen by clicking on the pencil icon.
UI Element: Edit the already selected embedded slot on the selected screen.
Cards Layout
Edit the layout of cards in the selected template.
You can adjust the number of cards displayed. When you increase the number of cards, the first card in the first row will be duplicated to fill the new card slots.
Caution
When reducing the number of cards, the removed cards will be permanently deleted. To restore them, you will need to recreate each card by re-entering the necessary details.
Background
Media Type: You can add an image or GIF by providing the URL, or you can keep the default "Normal" setting.
Background Color: For the "Normal" background, you can set your preferred color.
Background Size: You can select the size for the image/GIF from the following options: auto, cover, contain, and fit.
Container
Container Gap: You can adjust the horizontal and vertical gap between the cards.
Container Width: You can resize the width of the container as a percentage of the screen.
Border
Color: You can set the border color.
Style: You can select the border style from solid, dashed, and dotted.
Width: You can adjust the border width in pixels.
Corner Radius: You can resize the corner radius of the container for a better look.
Spacings
Paddings: You can adjust the padding between the container border and the inner elements.
Margin: You can adjust the margins between the screen edge and the container border.
Note
The vertical margin is the gap between the screen edge and the container border. The horizontal margin is the gap between the embedded card container and the native app elements above and below it.
Shadow
You can set the shadow in the x (horizontal) and y (vertical) directions.
You can adjust the blur and spread of the shadow.
Shadow Color: You can set the shadow color.
Individual Cards in the Template
Hover and select the individual card or click on the Card text in the hierarchy view on the left side of the dashboard to customize each individual card. You can also reposition the Cards using drag and drop. Hover over the Card text and click and hold the six dots to drag.
Color
You can set background color for the card.
Card Container
You have following customization options for each of the card.
Direction: You can align the elements like image, text, and buttons in horizontal or vertical direction.
Vertical and Horizantal alignment: You can customize the positioning of elements inside the card from Start, End, Center and Stretch options.
Gap: You can adjust the gap between the elements in the card
Container Width: You can adjust the width of each card.
Border
Color: You can set the border color.
Style: You can select the border style from solid, dashed, and dotted.
Width: You can adjust the border width in pixels.
Corner Radius: You can resize the corner radius of the card container for a better look.
Spacings
Paddings: You can adjust the padding between the card container border and the inner elements.
Margin: You can adjust the margins between the card outline and the card container border.
Shadow
You can set the shadow in the x (horizontal) and y (vertical) directions.
You can adjust the blur and spread of the shadow.
Shadow Color: You can set the shadow color.
Card Action
You can set the on click action for the cards.
Activity: Redirect the user to another activity. Select the activity from the dropdown.
Key Value Pairs: Add the Key Value Pair
Deep Link: Provide the Deep Link URL where the end user should be redirected
Copy: Provide the text or coupon code which should be copied.
Step 6: Preview and Finalize
Select your test device and click on the "Preview on Your Device" button to view how your embedded card will appear within your app.
By following these steps, you can successfully create engaging Embedded Card within the Apxor platform.
Last updated
