Integration of your widget on WordPress

WordPress allows you to embed custom HTML codes via blocks or widget areas. For the 'Snap' widget to work, you need to paste the copied code into the right area of your page or post.

Requirements:

• You must have generated and copied the HTML code of your 'Snap' widget (see the article: Snap: Embed a shopping widget directly on your site).

• You must have editing rights on the target WordPress page or post.

Steps: Embedding the Snap code

The embedding method changes slightly depending on which WordPress editor you use.

1. Using a page builder (e.g. Elementor, Divi, etc.)

Most page builders include a dedicated element for code or HTML.

1. Open your page in the builder (e.g. 'Edit with Elementor').

2. Look for an element like 'Code', 'HTML', or 'Embedded code'.

   

3. Drag and drop this element where you want it.

4. Paste the HTML code of your 'Snap' widget (the one that starts with <div id="chariow-widget" ...>) into the element's input field.

   

5. Save the changes in the builder and update the WordPress page.

2. Using the Gutenberg editor (Block Editor)

1. In the WordPress admin, open the page or post where you want to embed the widget.

2. Click the '+' button to add a new block where you want it.

3. Search for and select the 'Custom HTML' block (often found in the 'Widgets' or 'Formatting' category).

4. Paste the 'Snap' code into the block's text area.

5. Click 'Update' or 'Publish' to save the changes.

3. Using the Classic editor

If you're using the classic WordPress editor:

1. Open the target page or post.

2. In the editor window, switch from 'Visual' mode to 'Text' (or 'Code').

3. Paste Chariow's 'Snap' code exactly where in the text you want the button to appear.

4. Switch back to 'Visual' mode (the widget won't show, but you'll see the code) and click 'Update' to save.

4. Final check

After saving your changes, preview your page to confirm that:

• The 'Snap' buy widget displays correctly.

• The buy button works and starts the Chariow payment process without redirecting.

Common mistakes

• The widget doesn't appear: The code may have been pasted in 'Visual' mode in the Classic editor, which turned it into plain text. Fix: Always paste the HTML code into the 'Custom HTML' block (Gutenberg) or in 'Text' mode (Classic).

• Formatting issues: Make sure the code is properly isolated in a dedicated HTML block.

Need help? Contact our support via chat or at [email protected].